Include form data into an array of objects within an Angular data source

Question

Include form data into an array of objects within an Angular data source

I am struggling to add the edited form data from edit-customers-dialog.ts into an array of objects in my datasource. The form.data.value is returning correctly, but I'm facing issues with inserting it properly into the array.

As a beginner in Angular, I can't find the correct syntax for pushing to an interface data type. Any help would be appreciated. Thank you!

customers.html

...

customers.component.ts

...

edit-customer-dialog.html

...

edit-customer-dialog-comptent.ts

...

datasource array:

...

javascript angular typescript angular-material angular-reactive-forms

Answer 1

Answer №1

Insert let i = index and provide i to the edit function


<td mat-cell *matCellDef="let row; let i = index;">
    <ng-container>
        <button id="edit" mat-icon-button color="primary" title="Update Customer" (click)="editCustomer(row, i)" >
            <mat-icon>edit</mat-icon>
        </button>
      
     </ng-container>
</td>

editCustomer(customer: CustomerListItem, i: number){
}

Attempt to reset the data after editing.

this.dataSource.data[i] = result;
this.dataSource.data = this.dataSource.data;

OR

const temp = this.dataSource.data;
temp[i] = result;
this.dataSource.data = temp;

Answer 2

Insert let i = index and provide i to the edit function


<td mat-cell *matCellDef="let row; let i = index;">
    <ng-container>
        <button id="edit" mat-icon-button color="primary" title="Update Customer" (click)="editCustomer(row, i)" >
            <mat-icon>edit</mat-icon>
        </button>
      
     </ng-container>
</td>

editCustomer(customer: CustomerListItem, i: number){
}

Attempt to reset the data after editing.

this.dataSource.data[i] = result;
this.dataSource.data = this.dataSource.data;

OR

const temp = this.dataSource.data;
temp[i] = result;
this.dataSource.data = temp;

Include form data into an array of objects within an Angular data source

Answer №1

Similar questions

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

Angular 14 introduces a new feature that automatically joins open SVG paths when dynamically rendered from a data object

Refresh the Server Component once data has been modified by the Client Component within Next.js

Store the image URL in cache during AJAX loading

Arranging an Array of Arrays Containing Strings

Exploring the possibility of utilizing the talks.js library to develop a chat feature within a React application

"Learn how to handle exceptions in Nest JS when checking for existing users in MongoDB and creating a new user if the user does

A comprehensive guide on how to find keywords within an array and then proceed to make all text within the parent div tag stand

What are the drawbacks of utilizing the onClick function in JavaScript?

Connecting Vue.JS page to my existing HTML page: A step-by-step guide

Parsing nested JSON files to present data on a webpage

Is there a way to incorporate hyperlinks into the Application column of my v-data-table component?

Error: The property 'fixtures' of an undefined object cannot be accessed. This issue arose from trying to access nested JSON data after making

Can you explain the purpose of the `Sizzle.tokenize` function?

Launching an embedded webpage in a separate tab within the main browser window

Swap out a portion of HTML content with the value from an input using JavaScript

Are Angular 2 animations and transitions exclusively compatible with Chrome browsers?

What are the ways to activate an element in vue js?

Uncertainty surrounding the differences between SSG and SSR in the latest version of Angular

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript