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