Angular：处理ngFor中的对象变化，强制打印

编程问答 2022-04-21

问题描述

我的 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 中分配更改的英雄，set hero 中的 hero.component 也没有被调用，因此示例中的 showAlias 没有更新，我在 hero.component 中看不到别名。

我需要通过分配整个数组来强制 ngFor 吗？

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

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

更新 onHeroClick 方法中的 showAlias 属性

或

在 hero.component 中指定英雄

不幸的是没有解决问题。我需要在外面做出改变，因为其他事情发生了。

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

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

解决方法

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

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

这不会触发二传手。像这样更改行：

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