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

В вашем коде несколько синтаксических ошибок.

• 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, просто добавьте l oop поверх него, как показано ниже, вместо использования индекса. Это избыточно.

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

Answer 2

Вот код, который вы хотите, я получил идеальный результат массива.

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);
    });
  }

Просто поместите ваш метод pu sh в foreach ().

Результат, который Вы хотите.