Angular2 在模板中显示计算数据

angular2 displaying computed data in template

本文关键字：显示 计算 数据 Angular2      更新时间：2023-09-26

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

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

模板（小部件组件）： 

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

someCompValue 的值需要从数据成员变量中的属性集创建。

我应该在哪里注入代码来计算 someCompValue？我试图在 constructor（） 中执行此操作，但那一刻数据尚未分配 （=null）。

使用ngOnInit （ref）：

在 Angular 初始化数据绑定输入属性后初始化指令/组件。

所以在组件中：

@Component(...)
export class DataWidget {
    @Input data: Xxxx;
    constructor() { ... }
    ngOnInit() {
        // this.data should be set and ready to use here
    }
}

编辑：查看Günter Zöchbauer的答案，注意：如果数据在组件初始化时仅计算一次，请使用ngOnInit;如果要在开始时计算数据并在每次输入更改时重新计算，请使用ngOnChanges（根据Günter的答案）。

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

另请参阅OnChanges实时周期回调。

相关文章：