表示マップの内容

Question

私は私のテンプレートでマップを表示しようとしている：私は、私は「できるエラー占いを取得しています

<div *ngFor="let myStuff of myMap.entries()"> 
    ... 
</div> 

を使用しようとした

myMap : Map<string, Array<ATypeOfMine>> 

配列以外は何も繰り返しません。そして、私は自分のエントリを取得し、それらに取り組むための方法を見つけることができません

何か考えですか？

Answer 1

正しい方法は

<xxx *ngFor="let mapEntry of mapEntries">{{ myMap.get(mapEntry[0]) }}</xxx> 

Answer 2

map.entries()あなたのHTMLで

get mapEntries() { return Array.from(this.myMap.entries()); } 

であるあなたが.nextを使用してを反復処理することができますMapIteratorを返します。 *ngForは配列に対してのみ反復処理を行い、iterator protocol（これはMapIteratorが実装しています）を使用して繰り返しません。

Maps are intentionally not supportedは序数ではないためです。

あなたはあなたのように見えるの配列を与えるであろうArray.from()を経由して行うことができます配列に.entriesを変換したい場合：

[["key1", "val1"], ["key2", "val2"]] 

また["key1", "key2"]を返し、あなたが反復処理ができたArray.from(map.keys())を使用することができますそれそうのように：

<div *ngFor="let key of mapKeys">{{ myMap.get(key) }}</div> 

また、同様の配列にマップを変換するためにパイプを作成することができます。

import { Pipe, PipeTransform } from '@angular/core'; 
@Pipe({name: 'mapToArray'}) 
export class MapToArray implements PipeTransform { 
    transform(value: Map): Array { 
    const entries = value.entries(); 
    const result = []; 
    let done = false; 
    while (!done) { 
     const { value: currentValue, done: isDone } = entries.next(); 
     result.push(currentValue); 
     done = isDone; 
    } 
    return result; 
    } 
} 

あなたはそれがない理由とは何かを持っているマップ上で反復処理することができるさまざまな方法がたくさんある見ることができるように、あなたは、あなたが要約*ngFor="let values of myMap | mapToArray"

として持っているものを使用することができますデフォルトで動作します。ユースケースに応じて（キーが必要な場合など）、それを実行する最善の方法を理解することはあなた次第です。