2017-06-19 16 views
1

私は、私の子コンポーネントのIDのリストを取得するために外部APIを呼び出す必要があり、IDごとに別の外部APIを出して子の詳細を取得します。親コンポーネントで角2を使用して複数の子コンポーネントをロードする

私の角度のコードでは、結果は私が最初のAPIのCALからと[ID]は上記の入力変数である子コンポーネントに入る結果であり、この

<div *ngFor="let link of result | objToArr"> 
     <details #Details [Id]="link.id"></details> 
</div> 

のように見えます。子コンポーネントのngInitで詳細API呼び出しを呼び出します。

   this.Service.getDetails(this.apiBaseUrl, this.Id).subscribe(
        res => { 
         this.result = res.json().detail; 
         this.units = this.result.unit; 
         this.meterIdonLoad = this.Id; 
        }); 

これは、ほとんどの部分は動作しますが、詳細を取得すると同時に、外出複数のコールがあると、ブラウザがページ全体のためではなく許容できない待機期間中に結果の呼び出しをキューに似たようなロードする。以下は、単一通話のネットワークロジスティクスです。 Network Log from Chrome

ページの応答時間を改善する/ページを再設計するより良い方法はありますか?

dtailsの個々の呼び出しでは、50〜80 msの間でどこでもかかります。そのため、問題はAPIサーバーでは発生しません。

ご迷惑をおかけして申し訳ありません。

+0

すべての詳細を同時に表示する必要がありますか?詳細が表示されるたびに呼び出しを呼び出し、結果をキャッシュすることができます。同時にすべてを表示する必要がある場合は、すべての 'link.id'値を単一のエンドポイントに渡し、コンポーネントをリファクタリングして返されるデータを反復処理することを検討することもできます。ちょうど2つのアイデア...常にオプションがあります。 – Brandon

+0

はい、詳細を同時に表示する必要があります。私は、これらがグリッドの項目であるという言及をしなかったと思います。グリッド内の各広告申込情報は子コンポーネントです。 APIからの複数の呼び出しを終了すると、UIからの複数の呼び出しが良好になりますか?私は、外部APIを介してラッパーを記述し、すべてのデータを持つUIにデータセットを供給することができます。あなたはそれが負荷時間を改善するだろうと思いますか? – Vish

+1

私は一度にすべてのデータを取得し、それを繰り返します。角度は、レンダリングデータで非常に高速です。 API呼び出しに2〜3秒かかる場合は、エンドユーザーにユーザーエクスペリエンスを向上させるための何かがあることを知らせるローダーをいつでも表示できます。 – Brandon

答えて

1

は、私はあなたの要件は、あなたのバックアップされたよりもロードページが操作を処理する必要がありながら、すべての子の詳細を持っている場合は、あなたの要件

1)に基づいて、あなたのデザインを変更すべきだと思います。

2)あなたの要件は、ユーザーがあなたの要件は、あなたが子供を選択した後、ユーザーの詳細を示す必要がある場合は、仮想スクロール(https://github.com/rintoj/angular2-virtual-scroll

3)を使用することができるよりもスクロール始めたらあなたには、いくつかの子の詳細とリーマの詳細を表示することができている場合コンポーネントは、選択操作後に個々の要求を発生させることができます。

関連する問題