angular2在模板中顯示計算數據

Question

我剛剛開始使用Angular2並遇到以下問題。 模板（主要組件）：

<span *ngFor="#data of dataset" >
    <data-widget [data]="data"></data-widget>
</span>

模板（窗口小部件組件）：

<div>{{someCompValue}}</div>

需要從數據成員變量內的一組屬性中創建someCompValue的值。

我應該在哪里注入代碼來計算someCompValue？ 我嘗試在構造函數（）中執行此操作，但那一刻尚未分配數據 （= null）。

Answer 1

@Component({
  selector: 'data-widget',
  template`<div>{{someCompValue}}</div>`})
class DataWidget {
  @Input() data;
  ngOnChanges(change)  {
    this.someCompValue = doCalculationBasedOnData();
  }
}

另請參見OnChanges Livecycle回調。

Answer 2

使用ngOnInit （ ref ）：

在Angular初始化數據綁定的輸入屬性之后，初始化指令/組件。

因此在組件中：

@Component(...)
export class DataWidget {
    @Input data: Xxxx;

    constructor() { ... }

    ngOnInit() {
        // this.data should be set and ready to use here
    }
}

---

編輯：查看來自GünterZöchbauer的答案， 請注意 ：如果在組件初始化時只計算一次數據， 請使用ngOnInit ； 如果要在開始時計算數據，並在每次輸入更改時重新計算數據，請使用ngOnChanges （根據Günter的回答）。