Передача данных из родительского компонента в дочерний компонент в angular

Question

Здесь я хочу поместить значения this.formattedBookingPrice, this.formattedCheckingPrice в массив value и передать их дочернему компоненту, а не значениям c stati. Но, поскольку он входит в метод subscribe, я не мог получить к ним доступ. Я могу решить эту проблему?

Это мой родительский компонент.

export class DashboardComponent implements OnInit{
  lineChart = ['line_chart1', 'line_chart2', 'line_chart3', 'line_chart4', 'line_chart5'];
  value = [ this.formattedBookingPrice,  this.formattedCheckingPrice, '09.9M'];
  names = [  'Bookings', 'Checkins', 'Modifications', 'Revenue' ];
  numberUtil = new NumberUtil();
  bookingInfo = [];
  checkingInfo = [];

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

   getBookingInfo() {

      this.getTxnInfo('BOOKING').subscribe(
        bookings => {
          this.bookingInfo = bookings.responseObj.txnValues;
           this.bookingTtcSum = checkings.responseObj.ttcSum;
          this.formattedBookingPrice = numberUtil.formatPriceDefault(this.bookingTtcSum, ' M ').substring(2);
          console.log(this.bookingInfo);
      });
  }

  getCheckingInfo() {

  this.getTxnInfo('CHECKIN').subscribe(
    checkings => {
      this.checkingInfo = checkings.responseObj.txnValues;
      this.checkingTtcSum = checkings.responseObj.ttcSum;
        this.formattedCheckingPrice = this.numberUtil.formatPriceDefault(this.checkingTtcSum, ' M ').substring(2);
    });
  }

}

Это html.

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

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

export class ChipsComponent implements OnInit, OnChanges {
@Input('lineChart') lineChart: string;
  @Input('value') value: string;
  @Input('name') name: string;
  @Input() bookingInfo = [];
  @Input()  checkingInfo = [];

}

Это дочерний компонент 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

Вы можете попробовать добавить в значение [] в subscribe(). Как показано ниже.

   getBookingInfo() {

      this.getTxnInfo('BOOKING').subscribe(
        bookings => {
          this.bookingInfo = bookings.responseObj.txnValues;
           this.bookingTtcSum = checkings.responseObj.ttcSum;
          this.formattedBookingPrice = numberUtil.formatPriceDefault(this.bookingTtcSum, ' M ').substring(2);
          console.log(this.bookingInfo);
          this.value.push(formattedBookingPrice);
      });
  }



  getCheckingInfo() {

  this.getTxnInfo('CHECKIN').subscribe(
    checkings => {
      this.checkingInfo = checkings.responseObj.txnValues;
      this.checkingTtcSum = checkings.responseObj.ttcSum;
        this.formattedCheckingPrice = this.numberUtil.formatPriceDefault(this.checkingTtcSum, ' M ').substring(2);
    });

     this.value.push(this.formattedCheckingPrice);
  }

Answer 2

переназначить массив значений в подписке и реализовать changeDetectionStrategy (вызвать this.ref.detectChanges() после назначения) теперь проверить ngOnChanges() метод дочернего компонента

проверить следующий пример

https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy

в нем объясняются ваши требования с деталями и примерами кода