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:

...
javascriptangulartypescriptangular-materialangular-reactive-forms

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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A step-by-step guide on enhancing error message handling for Reactive forms in Angular

Here is a code snippet that I'm working on: public errorMessages; ngOnInit(): void { this.startErrorMessage(); } private startErrorMessage() { this.errorMessages = maxLength: this.translate.instant(' ...

javascriptangulartypescriptformsangular-reactive-forms

Suggestions for maintaining order in a multiselect PrimeNG while using it to conceal table columns

Currently, I am implementing a multiselect PrimeNG feature to show or hide columns in my ptable. While it works well for hiding columns, the issue arises when attempting to show them again. Instead of returning to their original order, the columns are be ...

angularprimengangular8primeng-turbotableprimeng-table

Is there a method in bootstrap that reveals the elements with the hidden class?

Currently, I am loading data into a bootstrap table on my JSP. The table class is hidden at the moment. After successfully uploading the data into the bootstrap table, I have implemented the following code: $(function() { var table = $('#Table') ...

javascriptjquerycsstwitter-bootstrap

Disable the sorting feature on selected columns

I have a Datatable in JS with a scroll bar that I added using scrollY. However, it is displaying unnecessary small arrows within the table which I do not want. I have tried various methods to remove them but without success. Can someone please help me wi ...

javascriptscrolldatatablecolumnsorting

Is there a way to retrieve the request object within loopback operational hooks?

I am currently utilizing loopback 3.x and have created an Access Hook within my code. My goal is to include a condition based on the User Agent. Specifically, I am looking to access Request > Headers > User-Agent. Is it feasible to retrieve this informat ...

javascriptexpressstronglooploopback

When I apply properties in JavaScript, I find that I am unable to utilize the CSS "hover" feature

For a personal project I am currently working on, I decided to experiment with setting background colors using Javascript. However, I have encountered an issue where my CSS code that changes the hover property does not seem to work after implementing the J ...

javascriptcss

How can you determine the class of an element that was clicked within an iframe?

Is it possible to retrieve the class of an element that is clicked within an iframe? Here is the HTML code: <input id="tag" type="text"> <iframe id="framer" src="SameDomainSamePort.html"></iframe> This is the JavaScript code: $(docum ...

javascriptjqueryhtml

Tips for updating and triggering useEffect when the router changes in React JS

I have a ChartPage function that is being called three times within three different routers. Inside the ChartPage function, I am using "useEffect" to update some variables based on the selected route. However, for some reason, it only triggers once, and wh ...

javascriptreactjs

Customizing the entire application's style based on conditions in Angular 4

Looking to implement a dark mode button for the app. Create a toggle switch for "dark mode". This switch will change a boolean value, "dark-ui", between true and false. When the app component detects dark-ui as true, add the class "dark" to a parent-leve ...

angular

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

javascriptjqueryhtmlajax

What is the process for obtaining the URL of the website that is hosting my iframe?

Do you have a technical inquiry? I am curious to know if it is feasible to retrieve the URL of the website that is hosting my iframe. The pages that host my iframe are utilizing the following code: <iframe id="vacancy-iframe" src="http://mypage.co ...

javascriptphpjquery

When importing data from a jQuery AJAX load, the system inadvertently generates duplicate div tags

Currently, I am utilizing a script that fetches data from another page and imports it into the current page by using the .load() ajax function. Here is the important line of code: $('#content').load(toLoad,'',showNewContent()) The issu ...

javascriptjqueryhtmlcssajax

Pass a variety of data points to PHP using Ajax requests

I am facing a challenge with passing multiple parameters during Ajax calls. The code works perfectly when I only pass one parameter. Here is the code snippet for the Ajax call: $.ajax({ type: "POST", url: "dataCartas.php", ...

javascriptphpjqueryajax

Is there a method to incorporate lists of varying types in a single v-for loop without causing any issues with type validations?

My current component is designed to display two different datasets, each with their own unique nature of data: state.articleTypeList: string[] state.renderPriceClassNameList: {[key: string]: string[]} To render both datasets within a single v-for componen ...

typescriptvue.jsvuejs3

The backend API does not receive the correct value from the checkbox

I'm having an issue with my registration page in ReactJS. There is a checkbox field called isadult. After clicking on the Register button and saving the data to a MongoDB database, the value of isadult shows up as [Object object] instead of True or Fa ...

javascriptreactjsaxios

Is it necessary to map all child Output variables when adding a child component in Angular?

Illustration: Parent ----- @Component({ selector: 'parent', template: `<div> Trial <child [modal] = "parentModal" (change) = "onChange($event)"> </child> ...

angularparent-child

Troubleshooting Angular 5 curly brackets problems

Upon updating my app from Angular v2 to v5, I encountered a strange issue with template curly braces. When a template element includes curly braces, nothing would be displayed without any errors in the console. <span>{{ 1 + 1 }}</span> <spa ...

angulartemplatesangular5

Spread an all-encompassing category across a collection

What is the method in TypeScript to "spread" a generic type across a union? type Box<T> = { content: T }; type Boxes<string | number> = Box<string> | Box<number>; (Given that we are aware of when to use Boxes versus Box) ...

typescriptgenericstypesunion

What is causing the TypeError when trying to set a property on undefined in AngularJS?

I've taken on the challenge of building a microblog app to learn more about angularJS. One thing that's really getting me is trying to understand the differences between service, factory, and provider. After some research, I decided to go with s ...

javascriptweb-applicationsangularjs

Removing a row from a table seamlessly without the need to reload the page

I am having an issue with my page that displays a list of orders. When a user clicks on a button to delete a row from the table, it only removes the first row successfully. However, when attempting to delete the second or third row, it does not work. Can s ...

javascriptjqueryajaxasp.net-mvc