时间戳

首页 > 解决方案 > 如何使用 ngFor 迭代 Map 并在 Angular 2+ 中的 html 上按顺序显示它们？

html - 如何使用 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，它显示为

AB

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

甲乙乙

我希望它是 ABC，这是我插入 Map 的顺序。

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

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

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

标签： htmlangulartypescripthashmapngfor

解决方案

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

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

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

在您的TS中添加此方法：

asIsOrder(a, b) {
   return 1;
}

在HTMLkeyvalue中将管道更改为：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

推荐阅读