Update rows in dynamic table with MatTable - json

Question

I would like to help me with updating records in a dynamic table worked with MatTable.
In my component get:
getComponentsFactualGeneral(pil: number){
this.diagnosticoService.readPilarParamFormId(pil).pipe().subscribe(pilar=>{
this.facgeneral = [];
(pilar as Pilari[]).forEach( getpilar => {
this.diagnosticoService.readComponentsPilarId(getpilar.idPilar).subscribe( comp=>{
getpilar.components = comp;
});
this.facgeneral.push(getpilar);
});
});
}
This generate the follow:
The html have:
<mat-tab>
<ng-template mat-tab-label>
<span (click)="getComponentsFormaGeneral(2)">Formal general</span>
</ng-template>
<mat-accordion class="example-headers-align" multi>
<mat-expansion-panel *ngFor="let item of fgeneral">
<mat-expansion-panel-header>
<mat-panel-title> {{ item.descripcion }} </mat-panel-title>
</mat-expansion-panel-header>
<div class="table-responsive">
<table mat-table [dataSource]="item.components" class="mat-elevation-z8"> <!-- here generate datasource -->
<ng-container matColumnDef="nombreestandar">
<th mat-header-cell *matHeaderCellDef> Estandar </th>
<td mat-cell *matCellDef="let element"> {{element.nombreestandar}} </td>
</ng-container>
<ng-container matColumnDef="nombrecomponente">
<th mat-header-cell *matHeaderCellDef> Componente </th>
<td mat-cell *matCellDef="let element"> {{element.nombrecomponente}} </td>
</ng-container>
<ng-container matColumnDef="evidencia">
<th mat-header-cell *matHeaderCellDef> Evidencia </th>
<td mat-cell *matCellDef="let element"> {{ element.evidencia }}
</td>
</ng-container>
<ng-container matColumnDef="conclusionCumple">
<th mat-header-cell *matHeaderCellDef> Cumplimiento </th>
<td mat-cell *matCellDef="let element"> {{ element.conclusionCumple }}
<ng-template #elseBlock>
No cumple
</ng-template>
</td>
</ng-container>
<ng-container matColumnDef="comentariosCc">
<th mat-header-cell *matHeaderCellDef> Comentario </th>
<td mat-cell *matCellDef="let element"> {{ element.comentariosCc }}
</td>
</ng-container>
<ng-container matColumnDef="comentariosComite">
<th mat-header-cell *matHeaderCellDef> Comentarios Comité </th>
<td mat-cell *matCellDef="let element"> {{ element.comentariosComite }}
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Acciones </th>
<td mat-cell *matCellDef="let e; let i=index;">
<button mat-icon-button color="primary" (click)="openDialog(e.idRespuestamacro,e.idEstandar,e.idFormulario,e.idInstitucion,e.idPilar,e.paramComponente)">
<mat-icon aria-label="Edit">edit</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</mat-expansion-panel>
</mat-accordion>
</mat-tab>
The generate datasource from components [dataSource]="item.components"
Now I need to update a row after edit, but how can I do it if datasource is generated from "item.components".
Thank you

Answer 1

For the dynamic table updates, definitely use --> RxJS
Step 1 -- In HTML Use an async pipe
Step 2 -- change fgeneral to fgeneral$ observable list, it will auto update from the observable.
Step 3 -- Make sure you import rxjs libraries
import { Component } from '#angular/core'
import { Observable } from 'rxjs'
Your HTML
<div *ngFor='let item of fgeneral$ | async' ... id="line_{{i}}" class="new-line glow">
// put your row template here...
</div>
In Your Component
// this Function will return an observable array. assign it to what you want..
// this is to give you an idea... a quick edit... will not compile..
public getComponentsFactualGeneral(): Observable<Fac[]> {
return this.http.get(this.baseUrl + '/xyz')
.pipe(
catchError(this.handleError('getFacs', []))
)
.map(fac => {
if(Array.isArray(fac )) {
return fac .map((item) => new Facs(item));
} else {
return [new Facs(fac )];
}
});
}
This ref should help.. and this