angular - 以 Angular 4 模板显示 map 内容

Question

我正在尝试在我的模板中显示 map :

myMap : Map<string, Array<ATypeOfMine>>

尝试使用一个

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

我收到一条错误消息，提示我只能遍历数组以外的任何内容。而且我找不到任何方法来获取我的条目并对其进行处理

有什么想法吗？

Answer 1

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。