我在我的应用程序中使用NgRx Store.
Home.html中
<list-objects
[array]="array| async"
(Edit)="Edit($event)"
(Delete)="Delete($event)"
></list-objects>
Home.ts
export class HomePage {
public array: Observable<itm[]>;
constructor(){
this.array= this.store.select(state => state.array);
this.array.subscribe((a) => {
console.log(a); //VALUES OK
}
}
Edit(event){
this.store.dispatch(this.actions.updateItem(event.item));
}
}
当我编辑数组项时,异步管道不更新视图,但“数组”对象中的值是更正的(订阅中的console.log显示更新的值).当我点击DOM中的某个位置(打开模态,单击按钮…)时,使用新值查看更新.
我还记录子组件“ngOnChanges”,它不会触发新值.
解决方法
尝试这样的事情：
(注意,此代码未经过测试).
<list-objects
[array]="array"
(Edit)="Edit($event)"
(Delete)="Delete($event)"
></list-objects>
export class HomePage {
public array: itm[];
constructor( private zone:NgZone ){
this.store.select(state => state.array).subscribe((a) => {
this.zone.run(() => {
this.array = a;
});
}
}
Edit(event){
this.store.dispatch(this.actions.updateItem(event.item));
}
}
我从模板中删除了异步管道,并直接分配了数组.通过在this.zone.run中执行此操作,摘要周期将触发,您的模板将重新呈现.
摘要周期通常仅在许多预定义的情况下触发,例如Http方法回调,UI输入.这里没有发生过,所以Angular不知道要更新.
