Question

我刚开始使用Angular2并且遇到了以下问题。模板（主要组件）：

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

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

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

someCompValue 的值需要从 data 成员变量中的一组属性创建。

我应该在哪里注入代码来计算someCompValue？我试着在constructor（）中做到这一点，但那时数据尚未分配（= null）。

Answer 1

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

另请参阅OnChanges livecycle callback。

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的答案）。

angular2在模板中显示计算数据

2 个答案: