Передать API, возвращающий данные массива из родительского компонента в дочерний компонент в Angular

Question

Здесь я пытаюсь передать this.bookingInfo = bookings.responseObj.txnValues; значения массива bookingInfo моему дочернему компоненту. Это мой родительский компонент.

 @Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{
  lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
  value = ['33.5M', '67.9M', '90.9M', '09.9M'];
  names = ['cancellations', 'Bookings', 'Modifications', 'Revenue' ];
  bookingInfo = [];

  ngOnInit() {

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

}

Это мой dashboard.component. html

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

Это мой дочерний компонент.

@Component({
  selector: 'app-summary-chips',
  templateUrl: './summary-chips.component.html',
  styleUrls: ['./summary-chips.component.scss']
})
export class SummaryChipsComponent implements OnInit {
  @Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() data: [];

  ngOnInit() {

   console.log('line chart: ', this.lineChart);
    console.log(this.data);
  }

}

Это мой summary-chips.component. 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>
  <!--<i class="a-naked-label a-naked-label&#45;&#45;danger-down fa c-summary-chip__naked-lable"><span class="a-naked-label__span">100.00%</span></i>-->

  <div id= "{{lineChart}}" class="c-summary-chip__graph ">
  </div>
</div>

Но когда я console.log(this.data); в дочернем компоненте, это печатает пустой массив.

Answer 1

поскольку ваш обработчик службы тратит время на выборку данных, this.bookingInfo обновляется через некоторое время, поэтому изначально вы не получите никакого значения в дочернем компоненте.

Чтобы это произошло, попробуйте реализовать changeDetectionStrategy, пожалуйста, проверьте ссылки ниже для лучшего понимания

https://alligator.io/angular/change-detection-strategy/

https://angular.io/api/core/ChangeDetectionStrategy

после реализации этого, когда this.bookingsInfo обновляется, тогда будет вызываться ngOnChanges() дочернего компонента, содержащий предыдущее и текущее (новое) значение this.bookingsInfo вместо onInit()

Answer 2

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

Одно очень быстрое решение для вашего проблема в том, что вы можете передать наблюдаемое себе в дочерний компонент, а в дочернем - подписаться на изменения значения.

в вашем компоненте панели мониторинга:

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit{
  lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
  value = ['33.5M', '67.9M', '90.9M', '09.9M'];
  names = ['cancellations', 'Bookings', 'Modifications', 'Revenue' ];
  bookingInfoObservalbe;

  ngOnInit() {

     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.bookingInfoObservalbe = this.ServiceHandler.getTxnInfo([], params)
      }

}

в шаблоне панели управления

<app-summary-chips [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [data] = "bookingInfoObservalbe"></app-summary-chips>

в вашем дочернем компоненте

@Component({
  selector: 'app-summary-chips',
  templateUrl: './summary-chips.component.html',
  styleUrls: ['./summary-chips.component.scss']
})
export class SummaryChipsComponent implements OnInit {
  @Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() data: [];
  bookingInfo = [];

  ngOnInit() {

   console.log('line chart: ', this.lineChart);
   this.data.subscribe(
            bookings => {
              this.bookingInfo = bookings.responseObj.txnValues;
              console.log(this.bookingInfo);
          });
  }

}

, рабочий образец этого можно найти на Stackblitz , надеюсь, это будет полезно.

Answer 3

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

EDIT

Вы пытаетесь передать асинхронные данные дочернему компоненту. У вас есть разные решения для этого. Например, вы можете использовать ngOnChanges вместо ngOnInit:

ngOnChanges() {
    console.log(this.data);
}

Другое решение - использовать * ngIf, чтобы отложить инициализацию компонентов сообщений:

<app-summary-chips *ngIf="bookingInfo" [lineChart]="lineChart[0]" [value] = "value[0]" [name] = "names[0]" [data] = "bookingInfo"></app-summary-chips>