Question

我知道如何一般地使用forEach但是今天我遇到了困扰我的地方。我用谷歌搜索了它，但没有得到任何我不知道的东西。

我因为Angular而开始使用TypeScript，并且我已经从DOM访问了一组控件。然后，我选择其中一个并找到它的孩子。

@ViewChildren("marker") markers: QueryList<ElementRef>;

this.markers.forEach(item => {
  let element = item.nativeElement;

  //item.children.forEach(child => {child.classList.add("poof"); });
  for (let child of element.children)
    child.classList.add("poof");
});

根据控制台，它看起来像一个数组，因为它是带括号的列表（尽管typeof告诉我它是一个对象）。

我对此感到困惑，并对于注释掉的代码为什么不起作用感到好奇。不确定谷歌的用途，也不确定。

Answer 1

forEach方法属于Array原型（请参阅here），因此它只能用于Array类型的变量。

QueryList类型实现了Iterable接口（根据Angular docs here），因此它允许使用for ... of进行循环。

Google Chrome（或任何其他浏览器）控制台打印的内容与对象的实际内容不同。

Answer 2

forEach是一个Array的方法。 TypeScript只允许您调用它理解的可用于该类型的方法。

如果类型QueryList＆lt;＆gt;不是一个数组，而是一个与运行时具有相同行为的对象，TS不会知道它。

您可以使用for..of循环，或者如果您想坚持使用forEach，您可以使用QueryList<> extends Array<T>。

Answer 3

你必须等到markers在视图中呈现：

@ViewChildren("marker") markers: QueryList<ElementRef>;

 ngAfterViewInit() {
     this.markers.forEach(item => {
     let element = item.nativeElement;

    //item.children.forEach(child => {child.classList.add("poof"); });
    for (let child of element.children)
      child.classList.add("poof");
    });
}

无法在数组＆＃39; ish对象上使用forEach（func）

3 个答案: