Angular: 在ngFor中处理对象变化，强制打印

Question

我的 app.component 有一个对象列表

class Hero {
    alias: string;

    constructor(public firstName: string,
                public lastName: string) {
    }
}

class AppComponent {
...
heroes: Hero[] = [
    new Hero("foo", "bar")
];
...
onHeroChange($event: Hero, index: number): void {
    this.heroes[index] = $event;
}


<div *ngFor="let hero of heroes; let index=index">
  <hero [hero]="hero" (heroChange)="onHeroChange($event, index)"></hero>
</div>

HeroComponent 是

export class HeroComponent {
  @Input()
  set hero(newValue: Hero) {
    this._hero = newValue;
    this.showAlias = !!newValue.alias;
  }

  get hero(): Hero {
    return this._hero;
  }

  @Output() heroChange: EventEmitter<Hero> = new EventEmitter<Hero>();
  showAlias: boolean = !1;

  private _hero: Hero;

  //

  @HostListener('click')
  onHeroClick(): void {
    this.hero.alias = `alias_${+new Date()}`;
    console.info('HERO TO EMIT', this.hero);
    this.heroChange.emit(this.hero);
  }
}

我的问题是，即使在app.component中分配了更改的英雄，hero.component中的set hero也没有被调用，所以示例中的showAlias没有更新我在 hero.component.

中没有看到别名

我是否需要通过分配整个数组来强制执行 ngFor？

也许解决方法是从数组中删除对象然后再次插入？虽然听起来像是无用的计算。

注意：这只是一个例子，这不是我真正在做的，所以像

Update the showAlias prop in the onHeroClick method

或

Assign hero in the hero.component

遗憾的是没有解决这个问题。我需要在外部进行更改，因为会发生其他事情。

是否可以将检测更改为 onPush 并标记为手动检查？

闪电战 ==> https://stackblitz.com/edit/angular-ivy-kpn3ds

Answer 1

您没有设置新的 hero，您只是在现有的属性上修改：

this.hero.alias = `alias_${+new Date()}`;

这不会触发 setter。像这样更改行：

this.hero = {...this.hero, alias: `alias_${+new Date()}`};

Angular: 在ngFor中处理对象变化，强制打印

Angular: handle object changes in ngFor, force print

arrays

angular

typescript

ngfor

ngonchanges