Angular 5中@Input Setter生成数组后*ngFor不更新问题排查

我来帮你分析和解决这个问题～你遇到的*ngFor不更新的情况，大概率是因为数组的引用没有发生变化，Angular的变更检测机制没察觉到数据更新导致的。下面给你具体的原因分析和解决方案：

核心原因 #

Angular默认的变更检测是基于引用对比的。如果你的@Input Setter只是在原数组的基础上修改元素（比如用fill、push或者直接修改索引值），数组的内存引用还是原来的那个，Angular就会认为数据没有变化，不会触发*ngFor的更新。

解决方案 #

1. 每次输入变化时生成新数组（最推荐） #

不要修改原数组，而是直接创建一个全新的数组实例，这样引用发生变化，Angular就能立刻检测到并更新视图。

示例代码：

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

@Component({
  selector: 'app-hotel-rating',
  template: `
    <div class="stars">
      <span *ngFor="let isFilled of starArray" class="star" [class.filled]="isFilled">★</span>
    </div>
  `,
  styles: [`
    .star { color: #ddd; font-size: 1.2rem; }
    .star.filled { color: #ffc107; }
  `]
})
export class HotelRatingComponent {
  private _starArray: boolean[] = [];
  // 存储当前评分和最大星级的私有变量
  private _currentRating = 0;
  private _maxStars = 5;

  @Input() set currentRating(rating: number) {
    this._currentRating = Math.max(0, Math.min(rating, this._maxStars)); // 做边界处理，避免非法值
    this.generateStarArray();
  }
  get currentRating(): number {
    return this._currentRating;
  }

  @Input() set maxStars(stars: number) {
    this._maxStars = Math.max(1, stars); // 确保最大星级至少为1
    this.generateStarArray();
  }
  get maxStars(): number {
    return this._maxStars;
  }

  get starArray(): boolean[] {
    return this._starArray;
  }

  private generateStarArray(): void {
    // 生成新数组：每个元素代表对应位置的星级是否填充
    this._starArray = Array.from({ length: this._maxStars }, (_, index) => index < this._currentRating);
  }
}

2. 若使用OnPush变更检测策略 #

如果你的组件设置了changeDetection: ChangeDetectionStrategy.OnPush，除了生成新数组，还可以手动触发变更检测（不过更推荐用上面的新数组方式，更符合不可变数据的原则）：

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

@Component({
  selector: 'app-hotel-rating',
  template: `<!-- 模板不变 -->`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HotelRatingComponent {
  private _starArray: boolean[] = [];
  private _currentRating = 0;
  private _maxStars = 5;

  constructor(private cdr: ChangeDetectorRef) {}

  @Input() set currentRating(rating: number) {
    this._currentRating = Math.max(0, Math.min(rating, this._maxStars));
    this.generateStarArray();
    this.cdr.detectChanges(); // 手动通知Angular更新视图
  }

  // maxStars的setter逻辑同理...
}

验证小技巧 #

你可以在generateStarArray方法里加个console.log(this._starArray)，每次输入变化时观察数组的引用是否更新（比如打印数组的内存地址），只要是新的引用，*ngFor就一定会同步更新视图。

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