Angular 2.使用ngFor在对象内循环数组

Question

我有组件数据的下一个结构:

我想使用打印assignedCards组件视图中的列表*ngFor.我这样做可能:

<div *ngFor="#item of mission.assignedCards" class="b-progress-bar__item m-progress-bar__item_completed">
<div class="b-progress-bar__inner">{{item}}</div>
</div>

但它有一个例外:

如果我测试mission价值,它说我,这mission是一个对象.

所以,我想访问对象中的assignedCards数组mission并进行循环.

Answer 1

我猜这个mission对象是异步加载的.所以它第一次未定义,稍后设置......

所以你可以使用Elvis运算符(mission?.assignedCards):

<div *ngFor="#item of mission?.assignedCards"
      class="b-progress-bar__item m-progress-bar__item_completed">
  <div class="b-progress-bar__inner">{{item}}</div>
</div>