无法在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循环的代码和我在这里看到的代码是一样的。

- Felipe

---

根据这个讨论，这可能与你所针对的Javascript版本有关。它应该适用于ES6。 - ConnorsFan

@ConnorsFan，即使在es6中，这也不是我在答案中提到的正确迭代Map的方式。如果使用keys()，就不需要使用for..of。forEach将是更好的选择。 - Max Koretskyi

Answer 1

您没有正确地迭代Map。 Map实现了iterable接口，并返回一个数组，其中第一个元素是键，第二个元素是值。以下是来自文档的示例：：

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]);
  }
}

- courses.indepth.dev

---

你好，我按照你的建议编辑了代码，但是当我尝试使用 for(... of ...) 循环时，仍然出现了相同的错误：Type 'Map<number, any>' is not an array type or a string type. 我还将你的示例复制粘贴到我的代码中，但是我得到了这个错误：Type 'Map<any, any>' is not an array type or a string type. 或许这与 Typescript 有关。 - Felipe

你在 tsconfig 中的 target 是什么？它应该是 es6，以正确支持 for..of 语法。 - Max Koretskyi

我快要完成了... 我已经按照你的建议更改了代码，但我仍然遇到一个错误，提示 entries 不是一个函数：Failed: productData.entries is not a function。也许我需要在我的文件中导入 Map 类，但我找不到正确的导入方式。 - Felipe

@Felipe，尝试按照这里描述的方法将es6添加到lib选项中。 - Max Koretskyi

实际上，我发现问题与 es6 设置无关，而是与我获取 productData 映射的方式有关，它来自一个 Observable。但是 for(... of ...) 的问题已经解决了！感谢您的帮助。 - Felipe

Answer 2

for (const key in productData) {  }

of基本上是forEach，它遍历值；in则用于访问对象的键。

- bryan60