Угловая таблица матов не отображала данные, исправлена, но не уверена, почему исправление работает

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>

Вывод до исправления

Вывод после исправления

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

В моем понимании матовый стол имеет OnPush changeDetectionStrategy, как видно из репозитория материалов в github:

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

Короче говоря, поскольку ссылка на массив dataSource не изменилась mat-table нет причин обновлять строки таблицы и после "fix" , используя this.facturasElectricas = [], вы назначаете объекту новый массив, следовательно, mat-table теперь получает уведомление о том, что dataSource теперь обновлено.

Answer 2

В соответствии с API таблиц material.angular.io рендеринг строк renderRows работает следующим образом. Рендеринг строк основывается на последнем наборе данных таблицы

Если источником данных таблицы является источник данных илиObservable, это будет вызываться автоматически каждый раз, когда предоставленный поток Observable испускает новый массив данных.В противном случае, если ваши данные являются массивом, эту функцию нужно будет вызвать для отображения каких-либо изменений.

, чтобы узнать больше, проверьте страницу API таблицы TABLE API