Angularコンポーネントの配列の辞書をどのように反復処理するのですか？

Question

I（だと思う）私は、キー日付と値が少なくとも1つのアレイ

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を試しましたが、何も表示されていない運がありませんでした。配管は角度2で最適なルートですか？

Answer 1

たぶん、あなたはキーを持つプロパティを作成することができますが、それらを反復して、各キーの配列を取得します（iterableでngForしか使用できず、json-like/hashオブジェクトがこの{}のように反復可能でない限り）。

.TS

this.keys = Object.keys(dateDictionary) 

.htmlの

Answer 2

まず、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" 
    } 
]