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中重新分配值数组并实现changeDetectionStrategy（分配后调用this.ref.detectChanges()），现在签入子组件的ngOnChanges()方法

检查以下示例

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

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

Answer 2

您可以尝试在useDataProvider的 value [] 中添加。如下图所示。

subscribe()

将数据从父组件传递到子组件中

2 个答案: