大規模なデータセット（角2）の* ngForループと* ngIfの最適化

* ngForを使用してデータJSONデータ（APIから）を表示していますが、私の考え方ではパフォーマンス上の問題が懸念されます。だから私はそれを改善する方法の提案を探しています。大規模なデータセット（角2）の* ngForループと* ngIfの最適化

これは私が自分のページに表示されています（データなし）JSON構造である：https://gist.github.com/fogofogo/f4b5ac9a765fc684e7e08b30221c6419

そして、このフルデータをJSON構造：https://gist.github.com/fogofogo/f7b5c3db347246689ea5007344eff53b

JSONはわずか2つの試合のためのデータを示しているとすでに2k行で！それは潜在的に100の一致を有する可能性がある。

これは私がページ上のデータを表示するために使用していますものです：

<div class="..." *ngFor="let sport of competition.sports"> 

    <p>{{ sport.sport }}</p> 

    <ng-container *ngFor="let country of sport.countries"> 

    <div class="..." *ngFor="let tournament of country.tournaments"> 

     <p>{{ country.country }} - {{ tournament.tournament }}</p> 

     <div class="..." *ngFor="let fixture of tournament.fixtures" class="tournament_item"> 

     <p>{{fixture.homeTeam.name}} V {{fixture.awayTeam.name}}</p> 

     <ng-container *ngFor="let market of fixture.markets"> 

      <ng-container *ngIf="market.marketId === 1"> 

      <div class="..." *ngFor="let marketOption of market.marketOptions"> 
      {{ marketOption.fractionOdds }} 
      </div> 

      </ng-container> 

     </ng-container> 

     </div> 

    </div> 

    </ng-container> 

</div>

そして、私はこのようなコントローラからデータを取得：

別にngForsのとんでもない量から

ngOnInit() { 
this.sub = this.route.params.subscribe(params => { 
    this.id = params['competitionId']; 
    this.service.get(this.id) 
    .subscribe(competition => this.competition = competition) 
}); 
}

（これは間違っていると感じています）、私は特にこのことに心配しています*ngIf="market.marketId === 1"。私は100試合で20以上の市場をチェックする必要があります。このコードをブラウザで250回実行すると、ロードに約5秒かかります。

誰かが私がこれをどのように最適化できるかについてアドバイスをいただけると感謝します。上記の目立った問題の謝罪 - ここでは新しい2/4の人。

出典

2017-09-11 Jose the hose