Angular8 ngFor数组内的数组答案

【问题标题】：Angular8 ngFor array inside arrayAngular8 ngFor数组内的数组
【发布时间】：2021-05-13 13:38:42
【问题描述】：

这是我的数组，其中包含另一个数组的属性消息。

chat = [{id:1, toUser:10, fromUser:11, seen:null, name:'Filip', messages:[{message:'Hello'},{message:'Hello again'}]}];

这是我的 HTML

<div *ngFor="let c of chat">
<h1>{{c.name}}</h1> //this works fine
<p>{{c.messages.message}}</p> //There I cant get anything. If I set c.messages[0].message I only get first result
</div>

【问题讨论】：

标签： arrays angular ngfor

【解决方案1】：

使用第二个嵌套的ngFor。比如：

<div *ngFor="let c of chat">
  <h1>{{c.name}}</h1>
  <p *ngFor="let item of c.messages">{{item.message}}</p>
</div>

【讨论】：

优秀的开发人员会检查 c.messages 是否为空或未定义。你可以使用ng-container。