私は2番のダッシュボードアプリケーションを作成しました。私はそのデータをAPIコールを使用しています。データを取得した後、それらをグラフでレンダリングします。以下のデモリンクを参照してください。私がdashboardcomponentのngOnInit（）メソッドからapi呼び出しを行うと、nullの応答が返ってきますが、ボタンのクリックイベントを使って同じことをすると、すべてのデータが期待どおりに読み込まれます。 API呼び出しを行い、最初の読み込み時にUIのすべてのデータを取り込むのに最適な場所/開始点は何ですか？角2ダッシュボードアプリケーションのWeb初期化時のAPI呼び出し
ngOnInit（）はapi呼び出しを行っても問題ありませんでした。私は購読機能の明確なイメージを持っていませんでした。 UIでレンダリングする前に、私のタイスクリプトファイルで複雑な計算を2回行わなければならなかった。私はsubscribeメソッドでのみこれを行う必要があります。大域変数を代入してドット演算子を実行せず、魅力的に動作することを期待しないでください。私はあなたがリスナーを購読するまであなたのためのデータを保持していないことが分かった。意味することは、ネストされた要素を持つjsonが大きい場合、subscribeメソッドのthis.data.innerdata [0] .finalvalue [0]をメソッドに渡して、すべての楽しい作業を行う必要があるということです。
あなたの情報をinitData（データ）に渡し、すべての計算を行い、レンダリングを行います。
export class Recent implements OnInit{
allFiles;
public allFiles_error:Boolean = false;
openModalWindow:boolean=false;
images = [];
currentImageIndex:number;
opened:boolean=false;
imgSrc:string;
constructor(private _recentService: RecentService) { }
ngOnInit() {
this._recentService.getJson().subscribe(
data => initData(data),
err => handleError(),
() => console.log('Completed!'));
}
initData(data){
this.allFiles = data;
console.log("allFiles: ", this.allFiles);
console.log(this.allFiles.length);
for(var i = 0; i < this.allFiles.length; i++) {
this.images.push({
thumb: this.allFiles[i].url,
img: this.allFiles[i].url,
description: "Image " + (i+1)
});
}
console.log("Images: ", this.images);
console.log(this.images.length);
console.log(this.images);
console.log(typeof this.images);
}
handleError() {
this.allFiles_error = true;
}
}
意図角度チームは、注射サービスに任意のAPI呼び出しを置くことを意味するような方法でアプリケーションを構築します。 @Injectableをチェックしてください。そこから、API呼び出しを行う必要のあるコンポーネントまたはディレクティブにサービスを注入します。
また、API呼び出しは非同期である可能性があります。これは、nullが返される理由の一部である可能性があります。 ObservablesまたはPromises/Callbacksで処理する必要があります。
私はobservableと@injectableサービスを使ってデータをロードしました。ここで私の質問は、どこでngOnInit（）メソッドからapi呼び出しを行うと、すべてがうまくレンダリングされるようにapi呼び出しを行うべきかということです。 APIの応答に問題はありません。私は、UIスレッドは、APIの応答を得るのを待つのが好きではないと思う。 – tksdotnet1
@ tksdotnet1もしあなたがいくつかのコードを投稿すると、私たちはもっとあなたを助けることができるかもしれません。私は、コンストラクタまたはngOnInit（設計の観点から優先）のいずれかでAPI呼び出しを行うとうまくいくことを発見しました。非同期呼び出しが完了するまで、データはnullになります。 subscribe（）関数を使用していますか？ – rjustin
あなたはuが試したどのようなコードを共有することができますか？ – Chandru