如何遍歷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組件中的數組字典？

回答

相關問題