angular中的父組件向子組件傳遞數據

Question

在這里，我想將this.formattedBookingPrice, this.formattedCheckingPrice值放入value數組並將它們傳遞給子組件而不是 static 值。但由於它進入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 中的值數組並實現changeDetectionStrategy （分配后調用this.ref.detectChanges() ）現在檢查子組件的ngOnChanges()方法

檢查以下示例

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

它通過詳細信息和代碼示例解釋了您的要求

Answer 2

您可以嘗試在subscribe()中添加value[ ] 。 如下圖所示。

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