Question

我正在使用ng2-chart库，我想将父组件的信息传递给子组件。我从提供数据的API中获取信息。但是它没有加载信息：

export class PruebasComponent implements OnInit {

  lineChartData: ChartDataSets[];
  lineChartLabels: Label[];

在ngOnInit中，我得到了数据

ngOnInit() {
    this.loading = true;


    this.datos.getDesktopLimit().subscribe(
      res => {
        this.loading = false;
        this.data = [res];
        this.dataSource = this.data[0];
        this.barChartData = true;
        this.getFilter(this.dataSource);
      }
    )
  }

并通过getFilter ()函数，我可以修改要发送的数据：

  getFilter(data) {

     data.sort((a, b) => a.id - b.id);
    for (let entry of data) {
      this.date.push(moment(entry.created).format('DD-MM-YYYY HH:mm'))
      this.time.push(entry.total_load_time * 0.001)
    }

    this.lineChartData =  [{ data: this.time, label: 'Time Render' }]  /* [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }] */;

    this.lineChartLabels = this.date;

    this.loading = false
  }

[datasets]发送空数据

 <app-graphic [datasets]="lineChartData" [labels]="lineChartLabels"></app-graphic>

Answer 1

问题在于，您是在接收数据并完成转换之前将数据传递给子组件。

您应该在*ngIf中使用<app-graphic>，直到完成数据获取和转换为止：

 <app-graphic [datasets]="lineChartData" [labels]="lineChartLabels" *ngIf="lineChartData && lineChartLabels"></app-graphic>

我认为应该使用*ngIf。

Answer 2

对于某些外部组件，重要的是在期望列表时永远不要发送null。

所以尝试：

lineChartData: ChartDataSets[] = [];
lineChartLabels: Label[] = [];

将数组从父组件传递到Angular中的子组件

2 个答案: