Angular mat-table 未显示数据，已修复但不确定修复的原因

Question

我试图显示从本地 API 检索到的简单数据，我使用 mat-table 存储在数组中，但无济于事。我设法修复了它，但我对 Angular/Typescript/Programming 很陌生，我不知道为什么我的修复有效，有人可以帮我理解为什么会这样吗？

pago.component.ts（修复前）

  export class PagosComponent implements OnInit {
      facturasElectricas: FacturaE[] = [];
      displayedColumns: string[] = ['fecha', 'monto'];
      ...
      ngOnInit() {
          this.getFacturasElectricas();
      }
      getFacturasElectricas(): void {
      const id = +this.route.snapshot.paramMap.get('id');
      this.pagoService.getFacturasElectricas().subscribe(facturas => {
          facturas.forEach(f => {
              if (f.factura.contrato === id && !f.factura.pagado) {
                  this.facturasElectricas.push(f);
              }
          });
       });
      }
   }

pago.component.ts（修复后）

   export class PagosComponent implements OnInit {
          facturasElectricas: FacturaE[];
          displayedColumns: string[] = ['fecha', 'monto'];
          ...
          ngOnInit() {
              this.getFacturasElectricas();
          }
          getFacturasElectricas(): void {
          const id = +this.route.snapshot.paramMap.get('id');
          this.pagoService.getFacturasElectricas().subscribe(facturas => {
              this.facturasElectricas = [];
              facturas.forEach(f => {
                  if (f.factura.contrato === id && !f.factura.pagado) {
                      this.facturasElectricas.push(f);
                  }
              });
           });
          }
       }

我唯一更改的行是this.facturasElectricas = [];，将它放在getFacturasElectricas() 方法中。

这是html部分 pago.component.html

<table *ngIf="facturasElectricas" mat-table #table [dataSource]="facturasElectricas">

            <ng-container matColumnDef="fecha">
              <th mat-header-cell *matHeaderCellDef> Fecha </th>
              <td mat-cell *matCellDef="let element"> {{element.factura.fecha}} </td>
            </ng-container>

            <ng-container matColumnDef="monto">
              <th mat-header-cell *matHeaderCellDef> Debe </th>
              <td mat-cell *matCellDef="let element"> {{element.monto}}</td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

Output before fix

Output after fix

Answer 1

我能想到的一件事是关于 Angular 的 changeDetectionStrategy。

• https://angular.io/api/core/ChangeDetectionStrategy

有关 changeDetectionStrategy 工作原理的全面信息，请参阅下面的链接：

• https://alligator.io/angular/change-detection-strategy/

带有异步数据源的示例代码（使用 setTimeOut()）

• https://stackblitz.com/edit/angular-mat-table-not-updated

据我了解，ma​​t-table 有一个 OnPush changeDetectionStrategy，如 github 的材料仓库中所示：

• https://github.com/angular/material2/blob/master/src/lib/table/table.ts

简而言之，由于dataSource数组引用没有改变ma​​t-table没有理由更新表格行并且在“fix”之后，通过使用@987654325 @，您正在为属性分配新的数组对象，因此，现在通知 ma​​t-table dataSource 现在已更新。

Answer 2

根据 material.angular.io 表格 API，渲染行 renderRows 的工作原理是根据表格的最新数据集渲染行

如果表的数据源是 DataSource 或 Observable，这将是 每次提供的 Observable 流发出一个 新的数据数组。否则，如果您的数据是一个数组，此函数将 需要调用才能呈现任何更改。

更多信息请查看表格 API 页面TABLE API