Angular 14循环生成元素ID后getElementById获取返回null问题

你创建的DOM元素还未挂载到页面的DOM树中就调用了appendAmountToCardDetails函数，此时浏览器的DOM里不存在该元素，所以getElementById必然返回null。

1. 先挂载元素到DOM，再调用函数 #

在循环里创建完card元素后，先将其添加到页面的父容器中，再执行后续查找逻辑：

for (let i = 0; i < this.visibleCards.length; i++) {
  const cardV = this.visibleCards[i];

  // 创建card元素
  const card = document.createElement('div');
  card.setAttribute("id", 'card' + i);
  card.classList.add('card');

  // ...添加card-details等子元素的代码

  // 先把card挂载到页面的父容器（比如id为card-container的元素）
  document.getElementById('card-container')?.appendChild(card);

  // 此时元素已在DOM中，再调用函数
  this.appendAmountToCardDetails(i);
}

2. 直接传递元素引用（更高效） #

既然你已经持有card元素的引用，完全没必要通过ID二次查找，直接把元素传给函数即可：

// 修改函数，直接接收元素
appendAmountToCardDetails(card: HTMLElement) {
  const cardDetails = card.querySelector('.card-details') as HTMLElement;

  // ...后续逻辑
}

// 循环中调用函数
for (let i = 0; i < this.visibleCards.length; i++) {
  const cardV = this.visibleCards[i];

  const card = document.createElement('div');
  card.setAttribute("id", 'card' + i);
  card.classList.add('card');

  // ...添加子元素的代码

  // 直接传入card元素
  this.appendAmountToCardDetails(card);

  // 最后挂载到DOM
  document.getElementById('card-container')?.appendChild(card);
}

3. Angular推荐的正确做法（数据驱动） #

Angular是数据驱动框架，不建议手动操作DOM，推荐用*ngFor渲染卡片，结合ViewChildren获取元素引用：

模板代码 #

<div class="card-container">
  <div *ngFor="let card of visibleCards; let i = index" 
       [id]="'card' + i" 
       class="card"
       #cardRef>
    <div class="card-details">
      <!-- 卡片内容 -->
    </div>
  </div>
</div>

组件类代码 #

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

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  visibleCards = []; // 你的卡片数据数组
  @ViewChildren('cardRef') cardElements!: QueryList<ElementRef>;

  ngAfterViewInit() {
    // 视图初始化完成后，可获取所有card元素引用
    this.cardElements.forEach((cardEl) => {
      const cardDetails = cardEl.nativeElement.querySelector('.card-details');
      // 执行原appendAmountToCardDetails中的逻辑
    });
  }
}

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