0

我有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 中分配 hero

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

是否可以将检测更改onPush为手动检查并标记为另一种选择？

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

4

1 回答 1

1

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

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

这不会解雇二传手。像这样更改行：

this.hero = {...this.hero, alias: `alias_${+new Date()}`};
于 2021-07-02T14:17:08.480 回答