json - 使用 MatTable 更新动态表中的行
问题描述
我想帮助我更新使用 MatTable 的动态表中的记录。在我的组件中得到:
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);
});
});
}
这会生成以下内容:
html有:
<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>
从组件生成数据源 [dataSource]="item.components" 现在我需要在编辑后更新一行,但是如果数据源是从“item.components”生成的,我该怎么做。
谢谢
解决方案
对于动态表更新,一定要使用 -->RxJS
第 1 步——在 HTML 中使用
async pipe
第 2 步 - 将 fgeneral 更改为
fgeneral$ observable list
,它将自动从 observable 更新。
第 3 步——确保你
import rxjs
的库
import { Component } from '@angular/core'
import { Observable } from 'rxjs'
你的 HTML
<div *ngFor='let item of fgeneral$ | async' ... id="line_{{i}}" class="new-line glow">
// put your row template here...
</div>
在您的组件中
// 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 )];
}
});
}
推荐阅读
- datepicker - 如何将页脚日期选择器移到日期选择器之外?
- node.js - 如何使用 pkg 在 Node.js 程序中获取程序的当前目录?
- database - 为什么位置透明度称为位置透明度?
- c# - 如何在 Xamarin 中同步从 GraphQL 获取的数据和 SQLite?
- html - CSS和Html调整登录表单高度而不挤压小屏幕上的文本框?
- python - 如何迭代seaborn barplot轴并在条形图上显示值
- javascript - 比较 Javascript 中的 null 和 undefined 与布尔值
- sql - 日期范围之间的 SQL 返回错误结果
- angular - HttpObserve 是否在 Angular 8 版本中针对 HttpClient 获取请求消失了
- sas - 源表和 LASR 服务器表有什么不同?