错误类型错误：无法读取角度模板中未定义的属性"描述"

Question

这是我的服务

getCADataService() : Observable<Currentaffairs[]>{
return this.httpClient.get<Currentaffairs[]>(`${this.url}/sports`);
}

这是我的组件:

getCAdata() {
this.dataservice.getCADataService()
.subscribe(currentAffairs =>
this.currentAffairs = currentAffairs
)

这是我的模板:

<ul>
<li *ngFor="let ca of currentAffairs | keyvalue">
<md-card class="example-card">
<md-card-header>
{{ca.articles.description}}
</md-card-header>
<img md-card-image src="">
<md-card-content>
<p>

</p>
</md-card-content>
<md-card-actions>
<button md-button>Approve</button>
<button md-button>Reject</button>
</md-card-actions>
</md-card>
</li>
</ul>

当在UI中显示数据时，我得到以下错误:

Answer 1

为此，你可以在html模板中使用?value将其定义为安全导航操作符，因为当组件加载的可观察对象仍在进行时，它返回为undefined

<ul>
<li *ngFor="let ca of currentAffairs | keyvalue">
<md-card class="example-card">
<md-card-header>
{{ca.articles?.description}}
</md-card-header>
<img md-card-image src="">
<md-card-content>
<p>

</p>
</md-card-content>
<md-card-actions>
<button md-button>Approve</button>
<button md-button>Reject</button>
</md-card-actions>
</md-card>
</li>
</ul>

Answer 2

根据您提供的http响应，似乎应该首先遍历articles数组或将GET响应映射到文章。

现在你试图访问这里的{{ca.articles.description}}一个属性description的数组，这是没有多大意义的。

一个可行的方法是调整这个方法

getCAdata() {
this.dataservice.getCADataService()
.pipe(map((response) => response.articles));
.subscribe(currentAffairs =>
this.currentAffairs = currentAffairs
)
}

这样this.currentAffairs就是一个数组aricles本身然后你可以删除keyvalue管道并这样更改模板

<md-card-header>
{{ca.description}}
</md-card-header>