html - 如何使用 ngFor 遍历 Map 并在 Angular 2+ 中按顺序在 html 上显示它们？

Question

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

一个 C B

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

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

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

请帮助我并提前谢谢你。

Answer 1

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.

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