Foreach 仅显示 Angular echarts 中数组的最后一项

Question

代码如下：

list.component.ts

chart: any = []
data = [
  {
    date: (5) ["2020-02-15 12:00:00",, "2020-02-15 13:00:00", "2020-02-15 14:00:00", "2020-02-15 15:00:00", "2020-02-15 16:00:00"],
    temperature: (5) [24.8, 25, 25.3, 25.3, 25.4]
  },{
    date: (5) ["2020-02-26 11:00:00" ,"2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
    temperature: (5) [25.4, 25.3, 25.7, 25.5, 25.7]
  }, {
    date: (4) ["2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
    temperature: (4) [27.9, 27.6, 27.4, 27.3]
  }
];

ngOnInit() {
  data.foreach((param: any) => {
    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: param.date
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: param.temperature,
        type: 'line',
        areaStyle: {}
      }]
    };

    this.chart.push(option);
  }
}

我在这里尝试的是显示一个 echarts 数组，但是日期有错误。 它只获取最后一项数据，而不是根据它们的索引获取数据。

list.component.ts

<div *ngFor="let record of data;let i = index">

                    <div echarts [options]="chartOption[i]" [autoResize]="true" style="height: 210px;"></div>
</div>

Answer 1

这是你想要的代码，我得到了完美的数组结果。

chart: any = [];
  ngOnInit() {
    let option: any;
    let data1 = [{
      date: ["2020-02-15 12:00:00", , "2020-02-15 13:00:00", "2020-02-15 14:00:00", "2020-02-15 15:00:00", "2020-02-15 16:00:00"],
      temperature: [24.8, 25, 25.3, 25.3, 25.4]
    }, {
      date: ["2020-02-26 11:00:00", "2020-02-26 12:00:00", "2020-02-26 13:00:00", "2020-02-26 14:00:00", "2020-02-26 15:00:00"],
      temperature: [25.4, 25.3, 25.7, 25.5, 25.7]
    }, {
      date: ["2020-02-26 12:00:00", "2020-02-26 13:00:00", "2020-02-26 14:00:00", "2020-02-26 15:00:00"],
      temperature: [27.9, 27.6, 27.4, 27.3]
    }]
    data1.forEach((param: any) => {
      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: param.date
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: param.temperature,
          type: 'line',
          areaStyle: {}
        }]
        // this.chart.push(option);
      };
      this.chart.push(option);
      console.log(this.chart);
    });
  }

只需将您的 push 方法放在 foreach() 中即可。

你想要的结果。

Answer 2

您的代码中有多个语法错误。

• Foreach 未正确关闭。
• 我不明白你为什么有 (5) 或 (4) 在您的数组中提及。

以下代码适用于我。

组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  charts: any = []
  data = [
    {
      date: ["2020-02-15 12:00:00", "2020-02-15 13:00:00", "2020-02-15 14:00:00", "2020-02-15 15:00:00", "2020-02-15 16:00:00"],
      temperature: [24.8, 25, 25.3, 25.3, 25.4]
    },{
      date: ["2020-02-26 11:00:00" ,"2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
      temperature: [25.4, 25.3, 25.7, 25.5, 25.7]
    }, {
      date: ["2020-02-26 12:00:00" ,"2020-02-26 13:00:00" ,"2020-02-26 14:00:00" ,"2020-02-26 15:00:00"],
      temperature: [27.9, 27.6, 27.4, 27.3]
    }
  ];

  constructor() {}

  ngOnInit() {

    this.data.forEach((param: any) => {
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: param.date,
          axisLabel : {
            interval: 0
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: param.temperature,
          type: 'line',
          areaStyle: {}
        }]
      };

      this.charts.push(option);
    });
  }
}

模板

<ng-container *ngFor="let chart of charts">
  <div echarts [options]="chart"></div>
</ng-container>

如果您想在 x 轴上显示所有日期，请在 xAxis 选项中使用以下选项：

axisLabel : {
  interval: 0
}

工作示例：Stackblitz

更新

根据您的图片，您在代码中显示的数据与图片中的数据不匹配。请展示您对 list.component.ts 的实际实现。此外，当您有一个名为 chartOption 的数组时，只需像下面所示那样循环它，而不是使用索引。这是多余的。

<ng-container *ngFor="let chart of chartOption">
  <div echarts [options]="chart"></div>
</ng-container>