Question

场景：

我正在使用ng2-charts在有角物料卡中绘制图表。
我有8张卡，每张卡应呈现自己的数据。

问题：

我的问题是，所有卡片中都显示相同的pieChartData。

注意：我可以看到它覆盖了之前的pieChartData

代码：
下面的函数在ngonit

上被调用8次

    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在画布中调用。

在Angular物料卡中加载数据

1 个答案: