如何使用 ngFor 迭代 Map 并在 Angular 2+ 中的 html 上按顺序显示它们？答案

【问题标题】：How to iterate over Map using ngFor and display them in order on html in Angular 2+?如何使用 ngFor 迭代 Map 并在 Angular 2+ 中的 html 上按顺序显示它们？
【发布时间】：2019-01-14 04:16:41
【问题描述】：

我正在使用 Angular 7.x。

我已经实现了使用 *ngFor 的代码，它遍历 Map 并在 html 上显示它们

      <mat-list-item *ngFor="let data of map | keyvalue">
          <div class="col-md-2">
              <p mat-line> {{data.value.name}} </p>           
          </div>            
      </mat-list-item>

它成功显示了一个列表，但问题是它没有按顺序显示它们。

例如，如果我将 A 和 B 添加到 Map，它显示为

甲乙

但是，如果我添加另一个，C，那么它显示为

一个 C 乙

我希望它是 A B C，这是我插入 Map 的顺序。

如果我使用console.log，那么它会按照我插入的顺序显示，而不是在html上。

我必须使用 MAP，但我不知道如何。

请帮助我，并在此先感谢您。

【问题讨论】：

你可以从这个 stackblitz stackblitz.com/edit/angular-6nlftw得到帮助
你的意思是数组“地图”是有序的，并在控制台上按顺序显示......但不在
内？？
@HrishikeshKale 感谢您的建议，但没有回答我的问题，即“如何按照我插入地图的顺序显示地图”。我不能使用键或值按某种顺序对它们进行排序。
@AkberIqbal 不，地图不是数组。就是Map，也就是其他语言的hashmap或者字典。如果我 console.log(map)，它显示为 A B C 但不是在使用 ngFor 的 html 上。
@Staytrippy 在 HTML 上渲染时没有 hashmap 的这种概念，它们被视为一个简单的对象。一个简单的解决方案会将其分配给数组并使用。

标签： html angular typescript hashmap ngfor

【解决方案1】：

Map 对象保存键值对并记住原来的键的插入顺序。任何值（对象和基元） values) 可以用作键或值。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

一种解决方案是执行以下操作：

在你的TS中添加这个方法：

asIsOrder(a, b) {
   return 1;
}

在 HTML 中将 keyvalue 管道更改为 keyvalue: asIsOrder：

<mat-list-item *ngFor="let data of map | keyvalue: asIsOrder">
    <div class="col-md-2">
        <p mat-line> {{data.value.name}} </p>           
    </div>            
</mat-list-item>

来源：https://github.com/angular/angular/issues/31420

【讨论】：

【解决方案2】：

如果你设置这样的值，

export class AppComponent  {
  
  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((key: string,value: string) => {
   console.log(key, value);
});
}
}

它会像这样显示列表。

aaa --> sss

sass --> sss

ss --> sss

sss --> sss

xxx --> sss

这意味着列表的顺序取决于您的密钥。

如果键是数字，则按升序排序。
如果键是字符串，则按字母顺序排序。
如果键是混合的，即一个键是字符串，另一个键是数字然后都转成字符串，先按数字升序排序，再按字符串字母顺序排序。
如果键未定义或为空，则最后显示。

试试这个链接。 https://stackblitz.com/edit/angular-map-keyvalue?file=src%2Fapp%2Fapp.component.ts

【讨论】：