Question

我（想）我有一个字典数据集，其中的键是日期，值至少是一个数组

private dateArray = {};

我正在动态地将更多数组加载到字典数组中，以便我可以将它们显示为组件上的不同部分。目标是这样的：

加入日期：9/1/17

姓名：玛丽，年龄：40

姓名：约翰，年龄：20

加入日期：10/1/17

姓名：杰夫，年龄：30

dateArray最终将日期作为键中的字符串，然后将属性添加为其特定属性的多个数组。

{Fri Sept 1 2017: ([Name: Mary, Age: 40],[Name: John, Age: 20]),
Sun Oct 1 2017: [Name: Jeff, Age: 30]}

如何从模板端访问数据？我正在使用Angular 2.我尝试了Mapping Object Keys section并且没有任何运气可以显示任何东西。是否在Angular 2中铺设最佳路线？

Answer 1

首先，您需要将dateArray声明为公开。该模板仅访问public成员。

之后，您可以在模板中执行以下操作：

<div *ngFor="let date of dateArray">
  <p>{{ date.date }}</p>
  <p>{{ date.Name }}</p>
  <p>{{ date.Age }}</p>
</div>

提示：dateArray数组应该是这样的：

[
  {
    "date": "Fri Sept 1 2017",
    "Name": "test1",
    "Age": "12"
  },
  {
    "date": "Fri Sept 1 2017",
    "Name": "test2",
    "Age": "2"
  }
]

Answer 2

也许你可以使用键创建一个属性，迭代它们然后为每个键获取数组（只要你只能使用带有iterable的ngFor和类似json的/ hash对象，就像这个{} ，是不可迭代的。）

.TS

this.keys = Object.keys(dateDictionary)

html的

<div *ngFor="let key of keys">
  <div *ngFor="let date of dateDictionary[key]">
    <p>{{ date.date }}</p>
    <p>{{ date.Name }}</p>
    <p>{{ date.Age }}</p>
  </div>  
</div>

如何迭代Angular组件中的数组字典？

2 个答案: