4

Tengo una tabla en la cual muestro datos que obtengo desde mi api. En mi componente .ts hago esto para poder acceder a los datos desde mi servicio, para ello hago esto.

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

En mi servicio tengo esto:

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

Y en mi html para mostrar estos datos hago esto:

 <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>

Muestro los datos en la tabla, y en esa tabla tengo un input para que se pueda editar el valor de la columna orden, mi método para editar es este

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

Todo me funciona correctamente, el "problema" que tengo es que en mi html para cada objeto tengo un botón, entonces cada que cambio un dato, tengo que hacer click en el botón para que este dato se edite, así como en esta imagen es como tengo actualmente. introducir la descripción de la imagen aquí

Mi pregunta es como puedo hacer un solo botón que me edite todos los objetos sin necesidad de guardar uno por uno así como lo tengo ahora. Lo que busco obtener es algo como esto. introducir la descripción de la imagen aquí

Disculpen por las imágenes, es para que se me pueda entender mejor lo que trato de hacer. Espero me puedan ayudar o dar una guiá de como conseguir lo que quiero. Gracias de antemano.

EDITADO: Por ahora he estado intentando esto en stackblitz https://stackblitz.com/edit/angular-formgroup-ngxxam?file=app%2Fapp.component.ts Pero no se como recorrer el valor del form en el método onMy() y hacer la edición.

2 respuestas 2

1
+50

Se puede lograr eso mismo de forma sencilla usando el ngModel y enlazando cada input con una propiedad del objeto.


.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)
    // });
   })

  }
}

Demo

1

Mi recomendacion en este caso, y si te es posible en base a tus requerimietos, es que utilices ReactiveForms para mantener mas ordenado el estado del formulario desde tu archivo .ts;

Siendo asi, podrias declarar la estructura de tu formulario con un FormGroup o un FormArray si es dinamico, asignas los controles al template, y en tu condigo siempre podras acceder al valor actual del control del formulario; luego de esto es una cuestion de tomar el objeto generado y guardarlo en el click del boton final.

Un ejemplo sencillo de esta estructura seria algo como esto:

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

saveForm() {
   console.log(this.myForm.value);
   // Output:
   // { control1: '', control2: '', ... }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.