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

}

這是我的總結-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

您不在設置數據或將值分配給數據的位置。 如果要將數據設置為變量，則需要初始化或設置從父組件傳遞的數據

編輯

您正在嘗試將異步數據傳遞給子組件。 你有不同的解決方案來做到這一點。 例如，您可以使用 ngOnChanges 代替 ngOnInit：

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

另一種解決方案是使用*ngIf，以延遲posts組件的初始化：

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

Answer 2

由於您的服務處理程序需要時間來獲取數據，因此 this.bookingInfo 會在一段時間后更新，因此最初您不會在子組件中獲得任何值。

為了實現這一點，請嘗試實施 changeDetectionStrategy，請查看以下鏈接以獲得更好的理解

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

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

實現后，當this.bookingsInfo更新時，子組件的ngOnChanges()將被調用，包含this.bookingsInfo的先前和當前（新）值，而不是onInit()

Answer 3

您在子組件中得到空列表，因為列表在訂閱內更新，這種方法不會觸發 angular 子組件來檢測屬性更改。

解決問題的一個非常快速的方法是，您可以將 observable 本身傳遞給子組件，並在子組件中訂閱值更改。

在您的儀表板組件中：

@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上找到它的工作示例，希望這會有所幫助。