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

Question

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

我想使用 *ngFor 在组件视图中打印 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>

但有一个例外：

如果我测试 mission 值，它告诉我，mission 是一个对象。

所以，我想访问 mission 对象中的 assignedCards 数组并对其进行循环。

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>

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

Angular 2. Loop of array inside object using ngFor

javascript

components

angular