Home / Questions / 467212
Accepted
Fernando Javier León
Asked: 2022-07-07 11:30:27 +0800 CST 2022-07-07 11:30:27 +0800 CST

How to edit multiple objects with a single button? Angular

  • 772

I have a table in which I show data that I get from my api. In my component .tsI do this to be able to access the data from my service, for this I do this.

 getBloques() {
    this.configuracioncvService.getBloques()
      .subscribe(res => {
        let bloquesOrdenados = _.orderBy(res,['ordenCompleto'], ['asc'])
        this.configuracioncvService.bloques = bloquesOrdenados;
        console.log('BLOQUESRESTAPI', bloquesOrdenados)
      })
  }

In my service I have this:

getBloques() {
    return this.http.get<Bloque[]>(this.URL_BLOQUES);
}

And in my htmlto show this data I do this:

 <table class="table" id="tabla">
      <thead>
           <tr class="d-flex">
                <th class="col-3">Bloque</th>
                <th class="col-3">Orden</th>
                <th class="col-3">Guardar</th>
                <th class="col-3">Ingresar a Bloque</th>
            </tr>
       </thead>
       <tbody>
            <tr class="d-flex" *ngFor="let bloque of configuracioncvService.bloques">
                 <td class="col-md-3">{{bloque.nombre}}</td>
                 <td class="col-md-3">
                      <mat-form-field>
                           <input type="number" matInput placeholder="Orden" [value]="bloque.ordenCompleto" [(ngModel)]="bloque.ordenCompleto">                                             
                      </mat-form-field>
                 </td>
                 <td class="col-md-3">
                      <button class="btn btn-secundary" (click)="editBloque(bloque)">
                           <i class="material-icons">save</i>
                      </button>
                 </td>
                 <td class="col-md-3">
                      <button mat-raised-button color="primary" [routerLink]="['/bloque-completo/', bloque.nombre]">
                           <i class="material-icons">east</i>
                      </button>
                 </td>
            </tr>
       </tbody>
 </table>

I show the data in the table, and in that table I have an input so that the value of the column can be edited orden, my method to edit is this

editBloque(bloque: Bloque){
    this.configuracioncvService.putBloque(bloque).subscribe(res =>{
          console.log('editado', res)
      });
 }

Everything works correctly for me, the "problem" I have is that in my html for each object I have a button, so every time I change a data, I have to click on the button so that this data is edited, as in this image it is as I currently have. enter image description here

My question is how can I make a single button that edits all the objects without having to save them one by one, as I have it now. What I am looking to get is something like this. enter image description here

Excuse me for the images, it is so that I can better understand what I am trying to do. I hope you can help me or give me a guide on how to get what I want. Thanks in advance.

EDITED: For now I've been trying this on stackblitz https://stackblitz.com/edit/angular-formgroup-ngxxam?file=app%2Fapp.component.ts But I don't know how to loop through the value of formthe in the method onMy()and do the editing .

angular

2 Answers

  1. My recommendation in this case, and if it is possible based on your requirements, is that you use ReactiveFormsto keep the state of the form from your file more organized .ts;

    Thus, you could declare the structure of your form with a FormGroupor FormArrayif it is dynamic, you assign the controls to the template, and in your code you can always access the current value of the form control; after that it's a matter of taking the generated object and saving it on the final button click.

    A simple example of this structure would be something like this:

    myForm = new FormGroup({
   control1: new FormControl(),
   control2: new FormControl(),
   ...
});

saveForm() {
   console.log(this.myForm.value);
   // Output:
   // { control1: '', control2: '', ... }
}
    • 1
  2. Best Answer

    The same can be easily achieved by using the ngModeland binding each input to a property of the object.

    .html

    <ng-container *ngFor="let bloque of bloques">
  <input [(ngModel)]="bloque.nombre" disabled>
  <input [(ngModel)]="bloque.ordenCompleto">
</ng-container>
<br>
<button (click)="guardar()">
Guardar
</button>

    .ts

    export class AppComponent {


  bloques = [
    {
      id: 1,
      nombre: 'Articulos',
      ordenCompleto: 2,
      ordenResumido: 2,
      ordenPersonalizable: 2
    },
    {
      id: 4,
      nombre: 'Libros',
      ordenCompleto: 1,
      ordenResumido: 1,
      ordenPersonalizable: 1
    }
  ];

  // Cuando se recibe el arreglo desde la API se crea una copia que
  // luego servirá para comparar los registros modificados y no 
  // llamar a la API si el registro no se modificó
  bloquesOriginal = JSON.parse(JSON.stringify(this.bloques))

  guardar(){

    // iterar cada uno de los bloques

   this.bloques.forEach(bloque => {

    // para eficiencia se puede comprobar si el registro actual (bloque)
    // se ha modificado. Si sus campos son iguales al original entonces
    // no es necesario guardarlo
    let bloqueOriginal = this.bloquesOriginal.find(b => b.id == bloque.id)
    if(bloqueOriginal.ordenCompleto == bloque.ordenCompleto) return


    // si el bloque se modificó proceder a guardarlo


    // this.configuracioncvService.putBloque(bloque).subscribe(res =>{
    //   console.log('editado', res)
    // });
   })

  }
}

    show

    • 1