Angular中ngFor未正确展示数据：如何触发filterForms重新执行？

问题核心原因：Angular的变更检测机制默认跟踪数组的引用变化，而非数组内部元素的属性变化。直接修改forms[0].show = false时，数组本身的引用未改变，导致模板中的过滤逻辑未触发重新执行，视图无法更新。

方案1：手动触发变更检测 #

在组件中注入ChangeDetectorRef，修改属性后主动通知Angular执行变更检测：

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

// 组件类代码
constructor(private cdr: ChangeDetectorRef) {}

hideExperienceForm(){ 
  this.forms[0].show = false;
  // 立即触发变更检测
  this.cdr.detectChanges();
  // 若组件使用OnPush变更检测策略，改用以下方法
  // this.cdr.markForCheck();
}

方案2：修改数组引用（推荐） #

通过创建新数组改变引用，让Angular自动感知数据变化，同时遵循数据不可变性原则：

hideExperienceForm(){ 
  // 遍历数组并创建新对象修改目标属性，生成新数组
  this.forms = this.forms.map(item => 
    item.id === 1 ? {...item, show: false} : item
  );
}

方案3：调整过滤逻辑实现方式 #

方式A：使用非纯管道整合过滤逻辑 #

将过滤逻辑移入管道，并设置为非纯管道（纯管道仅在输入引用变化时执行）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'generalPipe',
  pure: false // 标记为非纯管道
})
export class GeneralPipe implements PipeTransform {
  transform(forms: UserForm[]): UserForm[] {
    return forms.filter(item => item.show);
  }
}

模板中直接使用管道过滤原数组：

<div *ngFor="let tab of forms | generalPipe" class="form-container">
  <!-- 业务代码 -->
</div>

方式B：维护过滤后的数组变量 #

在组件中单独维护过滤后的数组，数据变更时手动更新：

filteredForms: UserForm[] = [];

ngOnInit() {
  this.updateFilteredForms();
}

// 更新过滤后数组的方法
updateFilteredForms() {
  this.filteredForms = this.forms.filter(item => item.show);
}

hideExperienceForm(){ 
  this.forms[0].show = false;
  this.updateFilteredForms();
}

模板直接遍历过滤后的变量：

<div *ngFor="let tab of filteredForms" class="form-container">
  <!-- 业务代码 -->
</div>

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