Angular 管道中的 MapToIterable 与 TypeScript

Question

正在尝试在 Angular 中实现管道。在意识到 ngFor 不适用于地图之后。一些研究让我相信未来的功能会解决这个问题，但与此同时，mapToIterable 管道就是答案。

我有以下代码：

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'mapToIterable'
})
export class MapToIterablePipe implements PipeTransform  {
  transform(map: Map<string, Object>, args: any = []): any {
    const a: any[] = [];
    console.log(map.keys());  // <- works as expected
    for (const k in map) {
      if (map.has(k)) {
        console.log("hello");  // <- never executes
        console.log(k);
        a.push({key: k, val: map.get(k)});
      }
    }
    console.log(a); // <- always empty
    return a;
  }
}

export const MAPTOITERABLE_PROVIDERS = [
  MapToIterablePipe
];

map.keys() 给了我一个正确键的列表，但没有别的工作。

关于如何诊断为什么我的循环没有正确填充数组的任何建议？

Answer 1

Map 'keys' 不是对象键，无法使用 Object.keys() 或 in 运算符获得。

考虑到 map.keys() returns 一个可迭代的，它应该是

for (const key of Array.from(map.keys())) {
  // this check is unneeded
  // if (map.has(k)) {
  ...
}

或在TypeScript 2.3 with downlevelIteration option,

for (const key of map.keys()) { ... }

或者只是

const a: any[] = Array.from(map.entries()).map(([key, val]) => ({ key, val }));

由于 TypeScript 实现扩展运算符的方式，[...iterable] 在 2.2 及更低版本中的工作方式与 Array.from(iterable) 不同。

Angular 管道中的 MapToIterable 与 TypeScript

MapToIterable in Angular pipe with TypeScript

typescript

angular-pipe

typescript2.0

angular