Angular中*ngFor调用方法触发NG0100错误的解决咨询

问题原因 #

Angular的变更检测机制会在组件初始化、数据更新时执行至少两轮检查：第一轮计算并渲染值，第二轮验证渲染后的值是否和计算时一致。你在模板中直接调用getRandomBikeColor()，每次调用都会返回不同的随机颜色，导致两轮检查的结果不一致，触发了这个错误。

简单解决方案：预先生成对应颜色数组 #

不需要修改bikeList的结构，只需新增一个和bikeList长度匹配的颜色数组，在bikeList更新时一次性生成所有随机颜色，模板中直接引用数组元素即可：

1. 修改组件代码：
   添加colorList属性，并在ngOnChanges中同步生成颜色：

   export class ListBikesComponent implements OnChanges {
     @Input() bikes!: Bike[];
   
     bikeList!: string[];
     colorList!: string[]; // 新增颜色数组
   
     ngOnChanges(changes: SimpleChanges) {
       if(changes['bikes'].currentValue) {
         this.bikeList = this.getUniqueBikeList();
         // 同步生成对应长度的随机颜色
         this.colorList = this.bikeList.map(() => this.getRandomBikeColor());
       }
     }
   
     getUniqueBikeList(): string[] {
       return [...new Set(this.bikes?.map((bike: Bike) => bike.model))]
     }
   
     getRandomBikeColor(): string {
       const colors: string [] = ['red', 'blue', 'green', 'yellow', 'black', 'rusty'];
       return colors[Math.floor(Math.random() * colors.length)];
     }
   
     trackByFn(index: number, bikeModel: string): number {
       return index;
     };
   }
   

2. 修改模板代码：
   在*ngFor中添加索引变量，绑定对应索引的颜色：

   <bike-list *ngFor="let bike of bikeList; let i = index; trackBy: trackByFn"
             [label]="bike"
             [addSpacing]="true"
             [bikeColor]="colorList[i]">
   </bike-list>
   

为什么这个方案有效？ #

• 颜色只在bikeList更新时生成一次，后续变更检测时，colorList[i]的值是固定的，两轮检查结果一致，不会触发错误。
• 不需要修改原有的bikeList结构，仅新增一个数组，实现成本低。

可选方案：使用纯管道（针对同一车型固定颜色场景） #

如果希望同一车型始终使用同一种颜色，可以创建一个纯管道，将车型名称作为输入，基于名称生成固定的随机颜色：

1. 创建管道：

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({ name: 'bikeColor' })
   export class BikeColorPipe implements PipeTransform {
     private colorMap = new Map<string, string>();
     private colors = ['red', 'blue', 'green', 'yellow', 'black', 'rusty'];
   
     transform(model: string): string {
       if (!this.colorMap.has(model)) {
         const randomIndex = Math.floor(Math.random() * this.colors.length);
         this.colorMap.set(model, this.colors[randomIndex]);
       }
       return this.colorMap.get(model)!;
     }
   }
   

2. 模板中使用：

   <bike-list *ngFor="let bike of bikeList; trackBy: trackByFn"
             [label]="bike"
             [addSpacing]="true"
             [bikeColor]="bike | bikeColor">
   </bike-list>
   

   这个方案的好处是同一车型会保留固定颜色，避免重复生成随机值，同时符合纯管道的性能特性。

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