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接口并返回一个数组，其中第一个元素是键，第二个元素是值。以下是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]);
  }
}

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

如果你的目标是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]);
  }
}

Answer 2

for (const key in productData) {  }

基本上是forEach并且在访问对象的键时迭代值。

无法在Angular 4中迭代Map

2 个答案: