Angular问题：如何获取*ngFor渲染后的.box-message元素

问题原因 #

你在HTTP请求的subscribe回调里直接给ads赋值后立即查询DOM时，Angular的变更检测还未完成，*ngFor对应的DOM元素还没渲染出来，所以document.querySelectorAll返回空的NodeList。而AfterViewInit仅在组件初始视图渲染完成后执行一次，异步请求返回时这个钩子已经执行完毕，自然无法捕获后续的DOM更新。

可行解决方案 #

1. 手动触发变更检测+延迟查询 #

给ads赋值后，先手动触发Angular的变更检测，让DOM立即更新，再通过setTimeout（利用微任务队列确保DOM渲染完成）执行查询：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

export class AdsComponent implements OnInit {
  ads!: Ads[];

  constructor(private cdRef: ChangeDetectorRef) {}

  public getAds(): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/apis/data/ads`, {observe: 'response'});
  }

  ngOnInit(): void {
    this.getAds().subscribe({
      next: data => {
        this.ads = data.body.content; // 原代码里的responseData应为data，已修正
        this.cdRef.detectChanges(); // 手动触发变更检测
        setTimeout(() => {
          const boxMessage = document.querySelectorAll('.box-message');
          console.log(boxMessage);
        });
      }
    });
  }
}

2. 使用ViewChildren监听元素变化（推荐） #

这是Angular官方推荐的方式，通过模板引用变量和ViewChildren获取元素，并监听其变化：

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

export class AdsComponent implements OnInit {
  ads!: Ads[];
  @ViewChildren('boxMessage') boxMessages!: QueryList<ElementRef>;

  public getAds(): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/apis/data/ads`, {observe: 'response'});
  }

  ngOnInit(): void {
    this.getAds().subscribe({
      next: data => {
        this.ads = data.body.content;
      }
    });
  }

  ngAfterViewChecked(): void {
    if (this.boxMessages.length > 0) {
      // 获取到渲染后的元素
      this.boxMessages.forEach(el => {
        console.log(el.nativeElement);
      });
      // 可添加逻辑避免重复执行
      // this.boxMessages.changes.unsubscribe();
    }
  }
}

对应的HTML需要添加模板引用变量：

<ul class="ul-ads">
  <li class="li-ads" *ngFor="let ad of ads"> <!-- 循环变量名与数组名重复，改为ad避免混淆 -->
    <div #boxMessage class="box-message">{{ad.message}}</div>
  </li>
</ul>

3. 利用AfterViewChecked钩子（注意性能） #

AfterViewChecked会在每次视图变更后触发，包括异步数据更新后的DOM渲染，但要添加判断避免重复执行逻辑：

import { Component, OnInit, AfterViewChecked } from '@angular/core';

export class AdsComponent implements OnInit, AfterViewChecked {
  ads!: Ads[];
  private isAdsProcessed = false;

  public getAds(): Observable<any> {
    return this.http.get<any>(`http://localhost:8080/apis/data/ads`, {observe: 'response'});
  }

  ngOnInit(): void {
    this.getAds().subscribe({
      next: data => {
        this.ads = data.body.content;
        this.isAdsProcessed = true;
      }
    });
  }

  ngAfterViewChecked(): void {
    if (this.isAdsProcessed) {
      const boxMessage = document.querySelectorAll('.box-message');
      if (boxMessage.length > 0) {
        console.log(boxMessage);
        this.isAdsProcessed = false; // 仅执行一次
      }
    }
  }
}

额外注意事项 #

• 原代码中subscribe回调里的responseData是笔误，应为参数data，否则会导致报错。
• *ngFor的循环变量名不要和数组名重复（原代码*ngFor="let ads of ads"），改为let ad of ads可避免变量混淆。

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