Angular ngOnChanges导致错误,直到异步函数完成
我有一个在生命周期事件Angular ngOnChanges导致错误,直到异步函数完成,angular,typescript,angular5,Angular,Typescript,Angular5,我有一个在生命周期事件ngOnChanges上发生的函数,现在该函数工作正常,但当应用程序首次加载时,它会抛出一个错误error TypeError:Cannot read property'fields'of undefined,现在我知道原因是它试图读取属性的数据尚未到达,但很明显,当数据在那里时,它就工作了。。这是我的职责 ngOnChanges(changes: SimpleChanges) { this.contentfulService.getWeekItems(this.
ngOnChanges
上发生的函数,现在该函数工作正常,但当应用程序首次加载时,它会抛出一个错误error TypeError:Cannot read property'fields'of undefined
,现在我知道原因是它试图读取属性的数据尚未到达,但很明显,当数据在那里时,它就工作了。。这是我的职责
ngOnChanges(changes: SimpleChanges) {
this.contentfulService.getWeekItems(this.item.fields.week)
.then((weekItems) => {
this.weekItems = weekItems;
}).then(() => {
this.numberOfItems = this.weekItems.length;
});
}
现在我知道如果我在我的
组件.html中,我可以做这样的事情“item?.fields?…”
在您的.ts
文件中是否有等效项?typescript中还没有空合并运算符。参考:
但是,
this.item?.fields
相当于this.item&&this.item.fields
typescript中还没有空合并运算符。参考:
但是,
this.item?.fields
等同于this.item&&this.item.fields
您可以检查属性fields
是否存在@swetanshkumar属性字段确实存在,但该项尚未返回,因此,当页面加载第一个“更改”时,没有任何内容,这就是调用错误的原因,而在下一个更改中,当数据返回时,错误明显消失。这就是为什么我告诉您添加一个检查值是否存在的原因?这将防止控制台抛出错误,因为未定义
@swetanshkumar您能解释一下我是如何在我的情况下应用这一点的吗?对不起,我没有仔细阅读,我会回来提出更好的建议。你的html是什么样子的?在调用getWeekItems
之前,是否可以在if
语句中检查item.fields
是否存在?您可以检查属性fields
是否存在@swetanshkumar属性字段确实存在,但该项尚未返回,因此,当页面加载第一个“更改”时,没有任何内容,这就是调用错误的原因,而在下一个更改中,当数据返回时,错误明显消失。这就是为什么我告诉您添加一个检查值是否存在的原因?这将防止控制台抛出错误,因为未定义
@swetanshkumar您能解释一下我是如何在我的情况下应用这一点的吗?对不起,我没有仔细阅读,我会回来提出更好的建议。你的html是什么样子的?调用getWeekItems