Update of Angular Material Table rows triggers a popup, however only the values from the first array are populated in all edited rows

Question

Update of Angular Material Table rows triggers a popup, however only the values from the first array are populated in all edited rows

Developed an application with two components (A & B) that includes a popup dialog for editing:

Component A fetches the data from a service and loads it into a data table
Component B initializes the data when a pop event is triggered from A.

Usually, multiple records are loaded with an array response into the table.

However, there seems to be an issue where when a pop event is fired, the data is correctly loaded for record 1 but for record 2, the same value as record 1 is displayed instead of its own.

We utilized MAT_DIALOG_DATA to import the table data into Component B.

The goal here is to have a unique record populate in form B

A_component.ts:

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

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

BComponent.ts

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

and HTML Code:

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

angular typescript angular-material angular-material-table

Answer 1

Answer №1

The dialog displays the same value because you are directly binding the input element's value using ngModel to the first row of your data at this line:

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

data[0].empName will always show the empName of the first record since it is accessed directly through data[0].

Instead, you should only pass the specific row that you want to edit, not the entire datasource.

In your component A, replace the complete datasource with the row that triggered the edit action:

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

Then in your dialog, you can access the data without an index, as it is not an array but just the individual row:

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

Answer 2

The dialog displays the same value because you are directly binding the input element's value using ngModel to the first row of your data at this line:

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

data[0].empName will always show the empName of the first record since it is accessed directly through data[0].

Instead, you should only pass the specific row that you want to edit, not the entire datasource.

In your component A, replace the complete datasource with the row that triggered the edit action:

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

Then in your dialog, you can access the data without an index, as it is not an array but just the individual row:

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

Update of Angular Material Table rows triggers a popup, however only the values from the first array are populated in all edited rows

Answer №1

Similar questions

Enhancing supertest functionality with Typescript

Is it feasible for a React-based shell to host or load an Angular component using Module Federation in Webpack 5?

At what juncture is the TypeScript compiler commonly used to generate JavaScript code?

Service in Angular 2 failing to push updates to component

Understanding how to pinpoint a particular request within an Angular 5 HTTP Interceptor

Using TypeScript to declare ambient types with imported declarations

Unlock the Power of EmailJS with Vue.js 2 and TypeScript

RxJS: the art of triggering and handling errors

Tips for incorporating the observer design pattern in REST APIs (Communication between front-end and back-end)

Issue with Angular modal not opening as expected when triggered programmatically

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

Tips and techniques for updating the form value in Angular 4 Material while maintaining binding characteristics

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an

Develop StoryShots for integrating with Angular in the Storybook framework

Unlocking The Mystery of Disappearing Inputs on Ionic 5

Is there documentation available for the gcloud output formats, such as the JSON output for each command?

Steps to resolve the issue with "Error: StaticInjectorError(AppModule)[NgbDropdown -> ChangeDetectorRef]"

In Angular 8, the routes for children were determined based on a specific condition

Using Rxjs to dynamically map values from an array with forkJoin

Discover which references are yet to be resolved within a tsx file