以角度将数据从父组件传递到子组件

Question

在这里，我想将 this.formattedBookingPrice, this.formattedCheckingPrice 值放入 value 数组并将它们传递给子组件而不是静态值。但由于它进入 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() 中添加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);
  }

Answer 2

在订阅中重新赋值数组并实现changeDetectionStrategy（赋值后调用this.ref.detectChanges()）现在签入子组件的ngOnChanges()方法

检查以下示例

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

它通过详细信息和代码示例解释您的要求