Загрузка данных в карту угловых материалов

Question

Сценарий:

• Я использую ng2-диаграммы для рендеринга диаграмм в картах угловых материалов.
• У меня 8 карт, каждая карта должна отображать свои данные.

Проблема:

• Моя проблема в том, что одинаковое pieChartData отображается во всех карточках.

  Примечание: я мог видеть, что он перекрывает предыдущий pieChartData

Код:
Ниже функция будет вызываться 8 раз ngonit

    cardsData = [
      { title: 'Item 1', cols: 2, rows: 1, item: 'item1' },
      { title: 'Item 1', cols: 2, rows: 1, item: 'item2' },
      { title: 'Item 1', cols: 2, rows: 1, item: 'item3' }
...
  ];

  getItems(RapidViewID: string, SprintID: string) {
    this.httpSubscription = this.service.getIssues(RapidViewID, SprintID)
      .subscribe((response) => {
        this.pieChartData = [completedIssues, issuesNotCompleted];
      });
  }

HTML

<mat-grid-list cols="4" rowHeight="300px">
  <mat-grid-tile *ngFor="let card of cardsData" 
    [colspan]="card.cols" [rowspan]="card.rows">
    <mat-card>
      <mat-card-header class="bw-cp-dashboard-title">
        {{ card.title }}
      </mat-card-header>
      <mat-card-content>
        <div>
            <canvas *ngIf="pieChartData" baseChart 
      [data]="pieChartData" [labels]="pieChartLabels" 
      [chartType]="pieChartType"></canvas>
        </div>
      </mat-card-content>
    </mat-card>
  </mat-grid-tile>
</mat-grid-list>

Answer 1

Вы действительно правильно используете *ngFor, но затем в поле <canvas> вы присваиваете каждой карточке одни и те же данные, поступающие из службы getItems. Вам нужно разделить эти данные и назначить правильные данные cardsData, а затем вызвать на холсте, используя, например, card.completedIssues.