使用 MatTable 更新动态表中的行

Question

我想帮助我更新使用 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”生成的，我该怎么办。

谢谢

Answer 1

对于动态表更新，一定要使用 --> 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 )];
     }
  });
}

这个ref should help.. 和this