[解決済み] ngForループを使った反復処理の方法 キーが文字列で値がマップの反復処理

質問

私はangular 5の初心者ですが、typescriptで別のマップを含むマップを繰り返し処理しようとしています。 どのようにangularでこの種のマップの下に反復する 以下はコンポーネントのコードです。

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map = new Map<String, Map<String,String>>();
  map1 = new Map<String, String>();

  constructor() { 


  }

  ngOnInit() {
    this.map1.set("sss","sss");
    this.map1.set("aaa","sss");
    this.map1.set("sass","sss");
    this.map1.set("xxx","sss");
    this.map1.set("ss","sss");


    this.map1.forEach((value: string, key: string) => {
      console.log(key, value);

    });


    this.map.set("yoyoy",this.map1);

  }



}

で、そのテンプレートhtmlは:

<ul>
  <li *ngFor="let recipient of map.keys()">
    {{recipient}}
   </li>


</ul>

<div>{{map.size}}</div>

解決方法は？

Angular 6.1+の場合 を使用すると、デフォルトのパイプ keyvalue ( レビューとアップヴォートもお願いします ) :

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

ワーキングデモ

旧バージョンの場合 :

これを解決する簡単な方法は、map を配列に変換することです。 Array.from

コンポーネント側:

map = new Map<String, String>();

constructor(){
    this.map.set("sss","sss");
    this.map.set("aaa","sss");
    this.map.set("sass","sss");
    this.map.set("xxx","sss");
    this.map.set("ss","sss");
    this.map.forEach((value: string, key: string) => {
        console.log(key, value);
    });
}

getKeys(map){
    return Array.from(map.keys());
}

テンプレート側．

<ul>
  <li *ngFor="let recipient of getKeys(map)">
    {{recipient}}
   </li>
</ul>

ワーキングデモ