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

Question

创建了具有两个组件（A&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
});

B组件.ts

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

和 HTML 代码：

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

score 0 · Accepted Answer

对话框中显示了相同的值，因为您将输入元素值通过显式绑定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">

1 回答 1