Array.from返回空数组。

Question

我想筛选出一个 div 元素的子元素。

通过 Angular 的 ViewChild 我可以直接访问到父 div，如果我像这样打印出子元素

console.log(this.myParentDiv.nativeElement.children);

我在Chrome中得到以下输出：

我需要将其转换为数组以便过滤div。但是如果我像这样转换它

console.log(Array.from(this.myParentDiv.nativeElement.children));

它返回一个空数组。 有什么想法为什么会返回空的呢？

- doorman

---

因为集合实际上是空的。请参见https://dev59.com/qW855IYBdhLWcg3w-JQr - JJJ

你的代码应该有问题。尝试在调试器控制台上执行 Array.from(document.body.children) 命令，看看它是否能正常工作。 - Matías Fidemraizer

你有注意到 HTMLCollection[0] 吗？下标 0 表示集合实际上是空的。你在控制台中看到的是稍后评估的值。也许最初这些值并不存在，而您是动态更新集合的。 - abhishekkannojia

好的，我添加了延迟以确保元素在调用Array.from之前已经被渲染，现在它可以正常工作了。 - doorman

@doorman，你是怎么解决的？能分享一下你的解决方案吗？ - Mesut Çiftçi

@MesutÇifci 好久不见，但似乎在调用数组操作之前我添加了延迟。所以请尝试使用 setInterval。 - doorman

Answer 1

我认为在这种情况下问题是Javascript代码在HTML文档准备好之前被执行了。

将你的JS代码或导入到页面底部，问题应该就解决了。

- Daniel Nwokocha

Answer 2

这不是最花哨的解决方案，但为了实现这一点，我将逻辑封装到一个超时函数中：

setTimeout(() => {
  const elementChildren = this.myParentDiv.nativeElement.children;
        
  // regular for loop
  for (let i = 0; i < elementChildren.length; i++) {
    console.log(">>",elementChildren[i]);
  }              
}, 100);

- Diego Borigen