遍历ViewChildren QueryList仅显示一个元素？获取带myRef标识的div高度异常排查请求

嘿，我来帮你搞定这个问题！你遇到的控制台只显示一个值的情况，大概率是两个常见问题导致的，咱们一步步来解决：

1. 修正@ViewChildren的参数错误 #

你当前TS代码里的@ViewChildren('#myRef')写法是错的！Angular的@ViewChildren装饰器需要的是模板引用变量的名称，不需要带#前缀。这个错误会导致Angular无法正确识别所有的#myRef元素，可能只匹配到了错误的元素或者干脆没匹配全。

修正后的代码应该是：

@ViewChildren('myRef') myRef!: QueryList<ElementRef>; 

2. 处理异步加载的数据（关键！） #

如果你的attendeesList是通过HTTP请求、定时器或者其他异步方式获取的，那ngAfterViewInit执行的时候，*ngFor还没来得及渲染所有的div元素——因为数据还没到呢！这时候QueryList里初始可能是空的，或者只有部分元素，自然forEach只能输出一个值。

解决办法是订阅QueryList的changes事件，当DOM元素因为数据更新而变化时，再去获取高度：

完整修正后的TS代码示例 #

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  // 这里是你的组件元数据，比如selector、templateUrl等
})
export class YourComponent implements AfterViewInit {
  attendeesList: any[] = [];

  // 去掉#号，正确引用模板变量
  @ViewChildren('myRef') myRef!: QueryList<ElementRef>; 

  ngAfterViewInit(): void {
    // 先处理当前已渲染的元素
    this.collectHeights();
    // 监听QueryList的变化，捕获异步渲染后的元素
    this.myRef.changes.subscribe(() => {
      this.collectHeights();
    });
  }

  private collectHeights(): void {
    const heightArray: number[] = [];
    this.myRef.forEach((item) => {
      const height = item.nativeElement.offsetHeight;
      heightArray.push(height);
      console.log('单个元素高度:', height);
    });
    console.log('所有元素高度数组:', heightArray);
  }

  // 模拟异步获取数据的场景（比如你的实际数据请求）
  ngOnInit(): void {
    setTimeout(() => {
      // 这里替换成你实际的数据源
      this.attendeesList = [
        { familyDetails: '家庭信息1' },
        { familyDetails: '家庭信息2' },
        { familyDetails: '家庭信息3' }
      ];
    }, 1000);
  }
}

额外检查点 #

别忘了确认你的attendeesList数组里确实有多个数据项！如果数组本身只有一条数据，*ngFor只会渲染一个div，那控制台自然只会输出一个高度值~

内容的提问来源于stack exchange，提问作者vishnu