HTML ошибка при передаче данных из родительского компонента в дочерний компонент в Angular

Question

Здесь я передаю данные от родителя к потомку и пытаюсь нарисовать график, используя эти данные. Это мой метод рисования графиков, который находится в дочернем компоненте createGraph(divName, chartDataInfo). Здесь я пытаюсь нарисовать 2 диаграммы.

  export class DashboardComponent implements OnInit{
      lineChart = ['line_chart1', 'line_chart2', 'line_chart3'];
      value = ['33.5M', '67.9M', '90.9M', '09.9M'];
      names = ['Bookings', 'Modifications','cancellations',  'Revenue' ];
      bookingInfo = [];
      mdfInfo = [];

      ngOnInit() {
         this.getInfo();
         this.getBookingInfo();
        }

      getBookingInfo() {
              const params = [];
              params.push({code: 'dateType', name: 'BOOKING'});
              params.push({code: 'fromDate', name: '2019-01-01'});
              params.push({code: 'toDate', name: '2019-12-31'});

              this.ServiceHandler.getTxnInfo([], params).subscribe(
                bookings => {
                  this.bookingInfo = bookings.responseObj.txnValues;
                  console.log(this.bookingInfo);
              });
          }

       getInfo(){
        const params = [];
        params.push({code: 'fromDate', name: '2019-01-01'});
        params.push({code: 'toDate', name: '2019-12-31'});
        this.dashboardServiceHandler.getMdfInfo([], params).subscribe(
          modifications => {
            this.mdfInfo = modifications.responseObj.txnValues;
            this.modificationTtcSum = modifications.responseObj.ttcSum;
           });
      }

    }

Это мой компонент панели управления. html

<app-summary-chips [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [mdfInfo] = "mdfInfo"></app-summary-chips>
<app-summary-chips [lineChart]="lineChart[1]" [value] = "value[1]" [name] = "names[1]" [bookingInfo] = "bookingInfo"></app-summary-chips>

Это мой дочерний компонент. Поэтому я звонил this.createGraph(this.lineChart, this.mdfInfo); 2 раза внутри ngOnChanges(changes: SimpleChanges). Но когда мне это нравится, обе диаграммы не появляются. Когда я вызываю this.createGraph(this.lineChart, this.mdfInfo) только один раз внутри ngOnChanges(changes: SimpleChanges) и в то же время я использую только селектор <app-summary-chips> только один раз, то рисуется одна диаграмма. В чем причина?

export class SummaryChipsComponent implements OnInit {
  @Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() bookingInfo = [];
  @Input()  mdfInfo = [];

  ngOnChanges(changes: SimpleChanges) {
    console.log(this.bookingInfo);
    console.log(this.mdfInfo );
    this.createGraph(this.lineChart, this.mdfInfo);
    this.createGraph(this.lineChart, this.bookingInfo);
    }

   createGraph(divName, chartDataInfo) {
    am4core.useTheme(am4themesAnimated);

    const chartNameChartTTV = am4core.create(divName, am4charts.XYChart);
    chartNameChartTTV.width = am4core.percent(100);
    chartNameChartTTV.height = am4core.percent(100);
    console.log(this.bookingInfo);
    chartNameChartTTV.padding(0, 0, 0, 0);
    chartNameChartTTV.data = [];

    for (let i = 0; i < chartDataInfo.length; i++) {
      const booking = chartDataInfo[i];
      console.log(booking);
      chartNameChartTTV.data.push({date: booking.time, value: booking.ttc});
    }

    chartNameChartTTV.colors.list = [
      am4core.color('rgba(4, 69, 142, 1)'),
    ];

    // Create axes
    const dateAxis = chartNameChartTTV.xAxes.push(new am4charts.DateAxis());
    const valueAxis = chartNameChartTTV.yAxes.push(new am4charts.ValueAxis());

    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.renderer.labels.template.disabled = true;
    dateAxis.renderer.grid.template.disabled = true;
    dateAxis.renderer.labels.template.disabled = true;

// Create series
    const series = chartNameChartTTV.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = 'value';
    series.dataFields.dateX = 'date';
    series.tooltipText = '{value';
    series.fillOpacity = 1;
    series.strokeWidth = 2;
    series.minBulletDistance = 15;

  }

}

Это мой компонент summary-chip. html

<div class="l-content-wrapper c-summary-chip oh" >
  <div class="c-summary-chip__value">{{value}}</div>
  <div class="c-summary-chip__txt">{{name}}</div>
  <div id= "{{lineChart}}" class="c-summary-chip__graph ">
  </div>
</div> 

Answer 1

Попробуйте обернуть свой код внутри if check

createGraph(divName, chartDataInfo) {

    if (divName && chartDataInfo.length) {}
}

Поскольку ngOnChanges является асинхронным c событием, нет гарантии, что при вызове функции внутри изменения будут присутствовать все параметры.

Также для отладки укажите console.log следующим образом.

createGraph(divName, chartDataInfo) {
    console.log(divName, chartDataInfo);

    if (divName && chartDataInfo) {}
}

Таким образом вы можете подтвердить наличие всех необходимых данных при вызове функции.

Answer 2

Внутри ngOnChanges хук используйте SimpleChanges для отслеживания параметров input. Если параметры присутствуют, вызовите вашу функцию.

ngOnChanges(changes: SimpleChanges): void {
    if (changes['divName'] && changes['chartDataInfo']) {
        this.createGraph(changes['divName'].currentValue, changes['chartDataInfo'].currentValue);
    }
}

Взгляните, пожалуйста https://dev.to/nickraphael/ngonchanges-best-practice-always-use-simplechanges-always-1feg