Обновление строки таблицы угловых материалов с всплывающими только значениями 1-го массива поступают во все строки редактирования

Question

создано приложение с двумя компонентами (A & B) с всплывающим диалоговым окном при редактировании:

• Comp A Извлечение данных из сервиса и загрузка в таблицу данных

• Гребень B инициирует данные при срабатывании события pop из A.

обычно загружается несколько записей с ответом массива в таблицу.

при срабатывании 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">