Question

我有一个带有对象数组的角度材质5组件。它显示一个模态对话框，打开另一个带有表单的组件来修改数组的一个对象。

当我的对话框关闭时，它会发回修改后的对象。因此父级获取此结果并更新数组。但显示器没有更新，这是我的问题。

我的逻辑是错还是我需要手动重新触发绑定？你会建议什么？

此处该函数打开对话框并在数组关闭后更新数组。

openDialog(event: any, id: number) {
     const index = this.contractors.findIndex(x => x.Id === id); 

     const dialogRef = this.dialog.open(ContractorEditComponent, {
     width: '600px',
     data: { contractor : this.contractors[index] }
   });

   dialogRef.afterClosed().subscribe( (contractor: ContractorModel) => {
      if (contractor !== null) {
         this.contractors[index] = contractor; // update my collection with new value
         // Should I re-trigger data binding manually here to update the UI?
      }
   });
}

Answer 1

Angular的更改检测仅在引用新对象时触发，但在修改对象时不触发。使用this.contractors[index] = contractor，您只需修改数组，但引用本身保持不变。

有几种不同的方法可以解决此问题，例如使用Observables创建数组的新副本，或通过注入和使用ChangeDetectorRef手动触发更改检测：

constructor(private ref: ChangeDetectorRef) {}
// ...
this.ref.detectChanges();

Angular：如何手动触发绑定？

1 个答案: