Angular ngOnChanges 无法第一次读取属性答案

【问题标题】：Angular ngOnChanges can not read property first timeAngular ngOnChanges 无法第一次读取属性
【发布时间】：2019-07-04 22:59:55
【问题描述】：

我正在尝试从组件的输入访问数据，并使用 ngOnChanges 来执行此操作，但在控制台中抛出错误，如 "can not read property 'name' of undefined"，但数据加载正确。

经过调试，只有在页面刷新时才会出现这个问题。第一次数据未定义，第二次数据正在加载。

我在这里做错了什么？

@Input() data: any;

 ngOnChanges(changes: any) {
    if(changes['data']) {
      this.dispEn = this.data.name.en;
      this.dispDe = this.data.name.en;
              }
  }

【问题讨论】：

标签： angular

【解决方案1】：

只需围绕数据进行测试以捕获它确实有值

ngOnChanges(changes: any) {
  if(changes['data'] && this.data) {
    this.dispEn = this.data.name.en;
    this.dispDe = this.data.name.en;
  }
}

【讨论】：

【解决方案2】：

这里最好使用setter

@Input('data) set dataInfo(dnfo: any){
   // ToDo method implementation
}

【讨论】：

【解决方案3】：

在初始化组件时首次检查输入时将触发 OnChanges。您可以使用isFirstChange()检查更改是否是第一个更改

 ngOnChanges(simpleChanges: SimpleChanges) {
    if (!simpleChanges.data.isFirstChange()) {
      ...
    }
  }

【讨论】：

这仍然会导致“无法读取未定义的属性'名称'”。需要检查数据的值。