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

Question

I'm using the ng2-chart library and I want to pass the information of a parent component to the child comonent. I get the information from an API that provides me with the data. But it is not loading the information:

export class PruebasComponent implements OnInit {

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

In the ngOnInit I get the data

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

and through the getFilter () function I can modify the data I want to send:

  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] sends the empty data

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

Answer 1

The problem is that you are passing the data to the child component before you receive the data and finish of transform it.

You should use *ngIf in the <app-graphic> until you finish getting the data and transform it:

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

I think with the *ngIf the should work.

Answer 2

With some external components, it important to never send null when they are expecting a list.

So try:

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