如何遍历Angular组件中的数组字典？

I（认为）我有一个字典数据与键而该日期和值是设定为至少一个阵列如何遍历Angular组件中的数组字典？

private dateArray = {};

我动态加载多个阵列到词典阵列，这样我可以显示它们作为组件上的不同部分。我们的目标是这样的：加入

日期：17年9月1日

名称：玛丽，年龄：40

名称：约翰，年龄：20

注册日期：17年10月1日

名称：杰夫，年龄：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的最佳路线吗？

来源

2017-10-16 cooper

我认为， '私人dateArray = {};'不是这个变量/对象的好名字。当你用{}声明这个变量时，你不是创建一个数组。你最好用另一个名字，所以它会有更好的含义。 –

-1

也许你可以创建一个属性的钥匙，遍历它们，然后获取每个键的数组（只要你只能使用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>

来源

2017-10-16 18:04:20

首先，您需要声明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" 
    } 
]

来源

2017-10-16 16:53:48 kotapeter

我将它设置为字典的原因是，这些项目可以按照相同的日期分组。分组是否应该发生在模板中？ – cooper

@cooper模板中的登录越少，越好（大多数情况下是课程）。 –

*少逻辑......当然 –

如何遍历Angular组件中的数组字典？

回答

相关问题