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

Question

创建具有两个组件（A＆B）的应用，并在编辑时显示弹出对话框：

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

• 从A发出弹出事件时，炸弹B会初始化数据。

通常，将具有数组响应的多个记录加载到表中。

从记录2的记录1正确加载pop数据时，将加载相同的值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">

  

数据[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">