带有弹出窗口的 Angular Material Table 行更新只有第一个数组值出现在所有编辑行中

Question

创建的应用程序包含两个组件（A&B），并在编辑时弹出对话框：

• Comp A 从服务中获取数据并加载到数据表中

• 当 A 触发 pop 事件时，Comb B 启动数据。

通常将多个记录与数组响应一起加载到表中。

当触发 pop 时，为记录 1 正确加载记录 2 的表单数据时，将加载相同的值 1 而不是 2。

使用MAT_DIALOG_DATA将表数据导入B组件。

要填充到表单 B 中的唯一记录

A_component.ts：

open() const dialogconfig = new MatDialogConfig(); 
dialogconfig.diableClose =true; 

this.dialog.open(BComoonent,
{ 
  data: this.datasource
});

BComponent.ts

constructor(@inject((MAT_DIALOG_DATA public) data:any;)

和 HTML 代码：

<input matInput placeholder="First Name " id="" name=" [ngModel]="data[0].empName">

Answer 1

对话框中会显示相同的值，因为您通过ngModel 将输入元素值显式绑定到此行中数据的第一行：

<input matInput placeholder="First Name " id="" name=" [ngModel]="data[0].empName">

data[0].empName 将始终显示第一条记录的empName，因为您是通过data[0] 直接访问它。

您应该做的是，只传递您要编辑的行，而不是完整的数据源。

在您的组件 A 中，您需要将数据源替换为触发编辑操作的行：

this.dialog.open(BComponent,
{ 
  data: this.datasource // --> change this to the row you want to edit
});

然后在您的对话框中，您可以在没有索引的情况下访问数据，因为它不是数组，例如不是完整的数据源：

<input matInput placeholder="First Name " id="" name=" [ngModel]="data.empName">