如何使用ngFor循环进行迭代Map包含键作为字符串，值作为映射迭代

我是angular 5的新手，并尝试迭代包含打字稿中另一张地图的地图。下面的角度如何在这种映射下进行迭代是组件的代码：

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>

工作演示

对于以前的版本：

一个简单的解决方案是将映射转换为数组：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>

工作演示

如果您使用的是Angular 6.1或更高版本，则最方便的方法是使用KeyValuePipe

   @Component({
      selector: 'keyvalue-pipe',
      template: `<span>
        <p>Object</p>
        <div *ngFor="let item of object | keyvalue">
          {{item.key}}:{{item.value}}
        </div>
        <p>Map</p>
        <div *ngFor="let item of map | keyvalue">
          {{item.key}}:{{item.value}}
        </div>
      </span>`
    })
    export class KeyValuePipeComponent {
      object: Record<number, string> = {2: 'foo', 1: 'bar'};
      map = new Map([[2, 'foo'], [1, 'bar']]);
    }

编辑

对于Angular 6.1和更高版本，请使用Londeren建议的KeyValuePipe。

适用于Angle 6.0及更高版本

为了简化操作，您可以创建管道。

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'getValues'})
export class GetValuesPipe implements PipeTransform {
    transform(map: Map<any, any>): any[] {
        let ret = [];

        map.forEach((val, key) => {
            ret.push({
                key: key,
                val: val
            });
        });

        return ret;
    }
}

 <li *ngFor="let recipient of map |getValues">

就其本身而言，它不会在每次更改检测时都触发，只有在map变量的引用发生更改时才会触发

Stackblitz演示

这是因为map.keys()返回迭代器。*ngFor可以与迭代器一起使用，但是map.keys()将在每个更改检测周期调用，从而生成对该数组的新引用，从而导致您看到错误。顺便说一句，这并不总是一个错误，你会传统不去想它。它甚至可能不会破坏您的任何功能，但建议您拥有一个看起来疯狂的数据模型-更改速度比更改检测器检查其值快。

如果您不想将映射转换为组件中的数组，则可以使用注释中建议的管道。似乎没有其他解决方法。

PS：此错误不会在生产模式下显示，因为它更像是一个非常严格的警告，而不是实际错误，但是，仍然要保留它不是一个好主意。

就像人们在评论中提到的那样，键值管道不保留插入顺序（这是Map的主要目的）。

无论如何，如果您有一个Map对象并想要保留顺序，则看起来最干净的方法是entrys（）函数：

<ul>
    <li *ngFor="let item of map.entries()">
        <span>key: {{item[0]}}</span>
        <span>value: {{item[1]}}</span>
    </li>
</ul>

以下代码对于按地图插入顺序显示很有用。

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

.ts文件添加以下代码。

asIsOrder(a, b) {
    return 1;
}