javascript - 无法在 Angular 4 中遍历 Map

Question

我在使用 Angular 4 创建前端时遇到了一个奇怪的错误。每当我执行下面的代码时:

  private createProductTree(productData: Map<number, any>): Map<number, Node> {

    const productTree = new Map<number, Node>();

    // Iterate over menu-item objects.
    for (let key of productData.keys()) {

      const product = productData.get(key);
      if (product.type === 'menu-item') {
        const node = new Node(product);
        productTree.set(key, node);
      }

    }

    return productTree;
  }

我收到以下错误:Type 'IterableIterator<number>' is not an array type or a string type.在for (... of ...)行。

我不确定我做错了什么。 for代码和我看到的一样here .

Answer 1

您没有正确迭代 Map。 Map 实现了iterable 接口(interface)并返回一个数组，其中第一个元素是键，第二个元素是值。这是一个例子 from the docs :

var myMap = new Map();
myMap.set('0', 'foo');
myMap.set(1, 'bar');
myMap.set({}, 'baz');

for (var v of myMap) {
  console.log(v);
}

日志:

["0", "foo"]
[1, "bar"]
[Object, "baz"]

因此对于您的示例，它将是:

for (let entry of productData) {
  const product = entry[1];
  if (product.type === 'menu-item') {
    const node = new Node(product);
    productTree.set(entry[0], entry[1]);
  }
}

但是，这需要 tsconfig 中的 target=es6。

如果你的目标是es5，你可以这样使用它:

for (let entry of Array.from(productData.entries())) {
       ...
}

或者使用 forEach 代替:

Array.from(productData.entries()).forEach((entry)=> {
  const product = entry[1];
  if (product.type === 'menu-item') {
    const node = new Node(product);
    productTree.set(entry[0], entry[1]);
  }
}