Question

我试图在我的模板中显示地图：

myMap : Map<string, Array<ATypeOfMine>>

试图使用

<div *ngFor="let myStuff of myMap.entries()">
    ...
</div>

我得到一个错误，告诉我不能迭代除了数组之外的任何东西。我无法找到任何方式来获取我的作品并对其进行处理

有什么想法吗？

Answer 1

正确的方法是

get mapEntries() { return Array.from(this.myMap.entries()); }

在您的HTML中

<xxx *ngFor="let mapEntry of mapEntries">{{ myMap.get(mapEntry[0]) }}</xxx>

Answer 2

map.entries()会返回MapIterator，您可以使用.next进行迭代。 *ngFor仅迭代数组，不使用MapIterator实现的iterator protocol进行迭代。

Maps are intentionally not supported因为它们不是有序的。

如果您想将.entries转换为数组，可以通过Array.from()进行转换，这将为您提供如下所示的数组：

[["key1", "val1"], ["key2", "val2"]]

您还可以使用Array.from(map.keys())，它将返回["key1", "key2"]，您可以像这样迭代它：

<div *ngFor="let key of mapKeys">{{ myMap.get(key) }}</div>

您还可以创建一个管道来将地图转换为数组：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'mapToArray'})
export class MapToArray implements PipeTransform {
  transform(value: Map): Array {
    const entries = value.entries();
    const result = [];
    let done = false;
    while (!done) {
      const { value: currentValue, done: isDone } = entries.next();
      result.push(currentValue);
      done = isDone;
    }
    return result;
  }
}

然后你可以使用你拥有的*ngFor="let values of myMap | mapToArray"

总之，正如您所看到的，您可以通过许多不同的方式处理地图上的迭代，这与默认情况下无法正常工作的原因有关。您可以根据自己的使用情况找出最佳方法（例如，如果您需要密钥）。

Answer 3

Angular有一个给定的管道，称为“ KeyValuePipe”。

<div *ngFor="let mapEntry of myMap | keyvalue"></div>

KeyValuePipe返回带有Angular KeyValue形状的模型。因此，要访问您的字符串键，您需要进行链接：

mapEntry.key

要访问ATypeOfMine数组值，请进行链接：

mapEntry.value.____etc

KeyValuePipe的默认顺序将按Unicode排序。如果要按插入顺序对其进行排序，则必须向地图管道传递一个compareFn，并为每个值添加一个索引属性。

我用这个：

(akv: KeyValue<number, any>, bkv: KeyValue<number, any>): number => {
  const a = akv.value.index;
  const b = bkv.value.index;

  return a > b ? 1 : (b > a ? -1 : 0);
}

*我从另一个堆栈溢出线程中找到了上面的比较fn。

Answer 4

这是解决调试目的的补充答案，因为有时您需要一种快速查看 Map 的方法。在这种情况下，指定的管道 (keyvalue ) 必须与经典的 json 管道一起使用：

{{myMap | keyvalue | json}}

以角度4模板显示地图内容

4 个答案: