咨询：如何用Angular方式动态隐藏*ngFor生成的Div元素

核心思路：用数据驱动视图（最符合Angular理念的方式） #

直接操作DOM不是Angular的推荐做法，我们可以通过维护每个元素的显示状态数组，结合数据绑定来实现隐藏逻辑，完全避免原生DOM操作。

组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponentComponent {
  // 示例：生成60个元素的数组（替换成你的实际数据源）
  items = [...Array(60).keys()];
  // 存储每个元素的隐藏状态，默认全部显示（false）
  hiddenStates: boolean[] = new Array(this.items.length).fill(false);

  hideDiv(index: number) {
    // 标记对应索引的元素为隐藏
    this.hiddenStates[index] = true;
  }
}

模板代码 #

根据需求选择以下两种方式：

1. 保留DOM元素，仅隐藏（用[style.display]）：

<div *ngFor="let item of items; let i = index">
  <div 
    (click)="hideDiv(i)" 
    [style.display]="hiddenStates[i] ? 'none' : 'block'"
  >
    第{{i}}个元素
  </div>
</div>

2. 直接从DOM中移除元素（用*ngIf）：

<div *ngFor="let item of items; let i = index">
  <div 
    (click)="hideDiv(i)" 
    *ngIf="!hiddenStates[i]"
  >
    第{{i}}个元素
  </div>
</div>

为什么你的@ViewChild方案失败？ #

• @ViewChild('imgId')只能获取模板中单个固定的模板引用元素，而你是通过*ngFor动态生成大量元素，无法用同一个模板引用绑定所有元素（即便绑定了，@ViewChild也只会返回第一个匹配的元素）。
• 你代码中的elementRef为undefined，本质是模板里根本没有#imgId这个引用变量，Angular找不到对应元素，因此抛出Cannot read properties of undefined (reading 'nativeElement')错误。

可选方案：用@ViewChildren操作DOM（不推荐） #

如果非要直接操作DOM，可使用@ViewChildren获取所有动态生成的元素，但这种方式不符合Angular数据驱动的设计理念，仅作参考：

组件代码 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
})
export class YourComponentComponent {
  items = [...Array(60).keys()];

  // 获取所有带有#divRef引用的元素
  @ViewChildren('divRef') divElements: QueryList<ElementRef<HTMLDivElement>>;

  hideDiv(index: number) {
    const targetDiv = this.divElements.toArray()[index];
    if (targetDiv) {
      targetDiv.nativeElement.style.display = 'none';
    }
  }
}

模板代码 #

<div *ngFor="let item of items; let i = index">
  <div #divRef (click)="hideDiv(i)">
    第{{i}}个元素
  </div>
</div>

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