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

我正在使用 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，则显示为

A B

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

A C B

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

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

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

请帮助我并提前感谢您。

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

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

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

添加这个方法到你的TS:

asIsOrder(a, b) {
   return 1;
}

改变你的keyvalue管道到keyvalue: asIsOrder在你的HTML:

<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>

Source: https://github.com/angular/angular/issues/31420 https://github.com/angular/angular/issues/31420