Angular Material Grid List：如何动态增删网格瓦片并触发重渲染

Angular的变更检测机制依赖于引用变化触发视图更新，直接用push/pop等方法修改原数组时，数组引用未改变，因此视图不会自动重新渲染。以下是几种有效解决方法：

1. 替换数组引用（最直接方案） #

通过创建新数组替换原数组的引用，让Angular检测到变化并更新视图：

添加组件示例： #

onAddComponentClick() {
  this.componentsAdded++;
  const newComponent = { title: `New Component ${this.componentsAdded}`, type: "chart"};
  // 使用扩展运算符生成新数组
  this.mainComponents = [...this.mainComponents, newComponent];
}

移除组件示例： #

onRemoveComponent(targetIndex: number) {
  // 使用filter返回新数组，过滤掉目标元素
  this.mainComponents = this.mainComponents.filter((_, index) => index !== targetIndex);
}

2. 手动触发变更检测 #

如果不想修改数组引用，可以注入ChangeDetectorRef手动通知Angular更新视图：

步骤1：注入ChangeDetectorRef #

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

constructor(private cdr: ChangeDetectorRef) {}

步骤2：修改数组后触发检测 #

onAddComponentClick() {
  this.componentsAdded++;
  const newComponent = { title: `New Component ${this.componentsAdded}`, type: "chart"};
  this.mainComponents.push(newComponent);
  // 手动触发变更检测
  this.cdr.detectChanges();
}

3. 响应式数据流管理（推荐方案） #

使用BehaviorSubject将数组包装为Observable，通过响应式方式管理数据变化，模板自动订阅更新：

步骤1：定义BehaviorSubject #

import { BehaviorSubject } from 'rxjs';

// 初始化空数组
private mainComponentsSubject = new BehaviorSubject<any[]>([]);
// 对外暴露只读Observable
mainComponents$ = this.mainComponentsSubject.asObservable();

步骤2：更新数据 #

onAddComponentClick() {
  this.componentsAdded++;
  const newComponent = { title: `New Component ${this.componentsAdded}`, type: "chart"};
  // 获取当前数组，生成新数组后发送通知
  const currentData = this.mainComponentsSubject.value;
  this.mainComponentsSubject.next([...currentData, newComponent]);
}

步骤3：模板中使用异步管道 #

<mat-grid-tile *ngFor="let c of mainComponents$ | async" 
               [colspan]="( cardLayout | async )?.components?.cols" 
               [rowspan]="( cardLayout | async )?.components?.rows">
  <app-dashboard-card [title]="c.title">
      <app-line-chart></app-line-chart>
  </app-dashboard-card>
</mat-grid-tile>

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