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

标签 javascript angular components

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

enter image description here

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

但它有一个异常(exception):

enter image description here

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

enter image description here

因此,我想访问 mission 对象中的 assignedCards 数组并对其进行循环。

最佳答案

我猜 mission 对象是异步加载的。所以第一次是undefined,后来才设置...

因此您可以使用 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>

关于javascript - Angular 2.使用ngFor在对象内部循环数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36177821/

相关文章:

javascript - 我对 JavaScript 中的对象感到很困惑

JavaScript 控制台函数提供不同的输出

打开编辑时,Angular 无法以 react 形式填充垫选择控件

Angular 2 - 多语言支持

javascript - 动态组件元素在 Vue.js 中不起作用

c# - Winforms 中应用程序范围组件应该放在哪里?

javascript - 数组中的流协变属性

javascript - 通过 javascript 设置 pretty-print 标签

angular - 如何将非字符串相关数据传递到获取请求 web api

javascript - 如何在 Angular 2+ 中从父组件更改子组件的 HTML/CSS?