Angular 4 init子組件輸入

Question

我的父組件html包含以下行以默認值為maxPrice調用子組件：

 <app-filter-events [maxPrice]='_maxPrice'></app-filter-events> 

在實例化子組件之前，父組件通過調用API來獲取maxPrice，這是代碼：

 constructor(private _dataService: DataService) { this._dataService.getEventsByCriteria(this._filterCriteria).subscribe(res => this._maxPrice = res); } 

問題在於子組件中未定義maxPrice。 我猜問題出在對API的異步調用上，但是我不知道要解決它。

謝謝

編輯：我的問題是，如果未定義maxPrice，則不隱藏子組件，而是在實例化子組件之前設置maxPrice。

Answer 1

在_maxPrice仍未定義時，您無法實例化app-filter-event組件：

<app-filter-events *ngIf='_maxPrice' [maxPrice]='_maxPrice'></app-filter-events>

Answer 2

在調用之前將變量設置為false，在異步完成后將其設置為true是非常簡單的。 在完成之前，您不希望將組件加載到dom中。

<div *ngIf="maxPriceBoolean">
  <app-filter-events [maxPrice]='_maxPrice'></app-filter-events>
</div>

Answer 3

只需使用*ngIf ：

<app-filter-events *ngIf='_maxPrice' [maxPrice]='_maxPrice'></app-filter-events>

要么

<ng-container *ngIf="_maxPrice">
   <app-filter-events [maxPrice]='_maxPrice'></app-filter-events>
</ng-container>

Answer 4

constructor在@Input()之前執行，因此綁定的Input值在構造函數塊中未定義，使您的組件實現OnInit並在ngOnInit()方法中訪問@Input（）變量，即可使用。

Answer 5

使用異步管道：

<app-filter-events [maxPrice]='_maxPrice$ | async'></app-filter-events>

組件代碼

    _maxPrice$: Observable<number>;
   constructor(private _dataService: DataService) {
     this._maxPrice$ = this._dataService.getEventsByCriteria(this._filterCriteria)
    }