如何解决Angular:处理ngFor中的对象变化,强制打印
我的 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()}`};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。