Angular material dialog box experiencing issues with saving multiple values

Question

Angular material dialog box experiencing issues with saving multiple values

Currently, I am utilizing Anular9 and implementing mat-raised-button in the following manner:

  <button mat-raised-button (click)="saveClick()" color="primary"><mat-icon>check</mat-icon>&nbsp;&nbsp;Ok</button>

The function saveClick() is outlined as follows:

saveClick() {
    for (let i = 0; i < this.hostid.length; i++) {
        const saudit: SInterface = {
            data: this.data,
            eid: this.eid[i],
            serverId: this.hostid[i]
        };
        this.subs.sink = this.sservice.addRecord(saudit)
            .subscribe(s => {
                this.dialog.close();
            });
    }

}

It's important to note that the data is shared among all the records.

As of now, the current code only saves the initial record with i=0. How can we modify the saveClick() function to save all records until i < this.hostid.length?

javascript angular typescript mat-table mat-dialog

Answer 1

Answer №1

H.

Instead of utilizing a traditional for loop, consider using the map function. Once you have an array of audits, pass it as a parameter to your service.

By the way, make sure to move your service call outside of the loop or map.

** Update: I may not be familiar with your specific business logic, but I believe using the mapping as a starting point is a good idea.

// Map each ID in the host ID array to SInterface
const audits: SInterface = this.hostId.map((id, index) => {
  return {
    data: this.data,
    eid: this.eid[index],
    serverId: id,
  } as SInterface;
});

// Send all audits to the service at once
this.sService.addRecord(audits).subscribe(...);

Answer 2

H.

Instead of utilizing a traditional for loop, consider using the map function. Once you have an array of audits, pass it as a parameter to your service.

By the way, make sure to move your service call outside of the loop or map.

** Update: I may not be familiar with your specific business logic, but I believe using the mapping as a starting point is a good idea.

// Map each ID in the host ID array to SInterface
const audits: SInterface = this.hostId.map((id, index) => {
  return {
    data: this.data,
    eid: this.eid[index],
    serverId: id,
  } as SInterface;
});

// Send all audits to the service at once
this.sService.addRecord(audits).subscribe(...);

Angular material dialog box experiencing issues with saving multiple values

Answer №1

Similar questions

Soft keyboard on mobile fails to update when arrows are used in Ajax-populated dropdown menus

defining data types based on specific conditions within an object {typescript}

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Trouble with incrementing JavaScript dictionary values within a nested for loop

The debate between importing images and including them inline in NextJS is a hot

Vue 3 throws an error stating: "An uncaught DOMException occurred because the string contains an invalid character."

Pressing the "Enter" key will submit the contents of

The value returned by a mocked Jest function is ignored, while the implemented function is not invoked

Does SharePoint Online support the .webmanifest format? What is the process for creating a Progressive Web Application in SharePoint Online using a supported webmanifest file?

Putting in Angular's most recent version

Winning opportunities created by using credits in the slot machine

How can I effectively display a blank menu item for the SelectField component in Material-UI within a React application?

Retrieve an array of all FormControl elements in Angular 2 and above

Is it possible for OpenFin to store logs in a secure database and what is the process for accessing logs located at %LocalAppData%openfinapps<app>app.log

enhancing the style of my Express project with CSS and EJS

Displaying the product quantity counter in the shopping cart immediately after adding the item

Working through JSON arrays in JavaScript

A comprehensive guide on using Lua Script in Node.js to efficiently insert multiple records into a Redis Hash

Issues encountered with the clearInteraval function in React

Having issues with creating a poll command for my Discord bot as it keeps throwing the error message: "Oops! TypeError: Cannot read property 'push' of undefined."