ngfor 用于具有 ng2-charts 的对象中的数组

Question

我正在尝试使用 ng2-charts 来绘制许多图表。我正在使用ngFor 在我的数组中循环，并制作与我的数组一样多的情节。

其实我有一个这样的数组：

   full_graph =  [
    {
    data : [2,4],
    labels: ['oct','nov']
    },
    {
    data : [2,4],
    labels: ['oct','nov']
    }
    ]

所以我应该有 2 个图表（实际上是折线图）。

在我的 html 文件中：

  <ion-list *ngFor="let data of full_graph">
    <ion-card *ngFor= 'let d of data'>
        {{d.data}}
        {{d.labels}}
        <canvas baseChart width="400" height="400"
        [datasets]="d.data"
        [labels]="d.labels"
        [options]="lineChartOptions"
        [colors]="lineChartColors"
        [legend]="lineChartLegend"
        [chartType]="lineChartType"
        [plugins]="lineChartPlugins"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
      </canvas>
    </ion-card>
  </ion-list>

当我在 ionic 卡中显示 d.data 和 d.labels 时，我的数据有 2 张卡。但是在<canvas> 里面我放了d.data 和d.labels 我得到了一个错误：

ERROR TypeError: Cannot read property 'length' of undefined

如果改为在画布内使用 d.data 和 d.labels 我提供 2 个简单数组，它可以完美运行，所以我不明白为什么我不能这样做..

谢谢

Answer 1

问题就在这里-

<ion-list *ngFor="let data of full_graph">
  <ion-card *ngFor= 'let d of data'>

您正在尝试将“数据”作为数组而不是对象，因为 full_graph 是对象数组而不是数组数组，因此您可以使用下面的方法修复上述代码的替换 -

 <ion-list>
   <ion-card *ngFor="let d of full_graph">