Angular Mat-Option使用Getter导致无限循环问题求助

问题根源 #

核心是Angular变更检测机制与Getter返回新引用的冲突：当父组件的Getter每次被调用时返回了新的数组实例（比如用[...]解构、filter()/map()这类返回新数组的操作），Angular会判定数据发生变化，触发重新渲染；而<mat-option>的渲染过程又会再次触发变更检测，再次调用Getter，最终形成无限循环。注释掉<mat-option>后，失去了触发变更检测的渲染逻辑，循环自然终止。

解决方案 #

1. 缓存Getter返回的数据，避免重复生成新引用

在父组件里，不要每次调用Getter都生成新数组，而是缓存计算后的结果，仅在源数据变化时更新缓存：

// 父组件代码
private _cachedOptions: any[];

get options() {
  // 缓存不存在或源数据更新时，重新生成选项数组
  if (!this._cachedOptions) {
    this._cachedOptions = [...this.sourceData]; // 替换为你的实际数据转换逻辑
  }
  return this._cachedOptions;
}

// 监听源数据变化，重置缓存
ngOnChanges(changes: SimpleChanges) {
  if (changes['sourceData']) {
    this._cachedOptions = [...this.sourceData];
  }
}

2. 给<mat-option>添加trackBy函数优化渲染

通过trackBy告诉Angular如何识别列表项的唯一性，避免不必要的DOM重绘和变更检测触发：

<!-- 子组件模板 -->
<mat-select [(value)]="selectedValue">
  <mat-option 
    *ngFor="let opt of options; trackBy: trackOptionById" 
    [value]="opt.value"
  >
    {{ opt.label }}
  </mat-option>
</mat-select>

// 子组件类
trackOptionById(index: number, option: any): any {
  return option.id; // 使用项的唯一标识（如id）作为跟踪键
}

3. 简化Getter逻辑

如果Getter只是返回源数据的副本，可直接返回源数据（无需保护原数据时），或者在源数据初始化/更新时提前处理好选项数组，去掉Getter直接传递处理后的数组给子组件。

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