为什么 dataSource 没有显示在我的 mat-table 中？

Question

我正在尝试在 mat-table 中显示 factureagressoes。显示表头但不显示数据。

控制台中没有显示错误。
datasource 有数据。

组件.ts

public dataSourced: MatTableDataSource<FactureAgresso>;
public displayedColumns: string[] = ['numfacture','cnuf','select',];
public selection = new SelectionModel<FactureAgresso>(true, []);
public factAgressoes: any = [];

ngOnInit() {
    this.chequeSaisi = this.chequeService.data;
    for (const frs of this.chequeSaisi.fournisseur) {
        this.factAgService.getFactAgByCriteria(frs.cnuf).subscribe(
            (res: any) => {
                this.factAg = res ? res._embedded.factureAgressoes : [];
                for (const key in this.factAg) {
                    if (Object.prototype.hasOwnProperty.call(this.factAg, key)) {
                        const element = this.factAg[key];
                        element.fournisseur = frs;
                        this.factAgressoes.push(element);
                    }
                }
            }
        );
    }
    this.dataSourced = new MatTableDataSource(this.factAgressoes);
    this.ecart = this.chequeSaisi.montant;
}

component.html

<table mat-table class="mat-elevation-z8" [dataSource]="dataSourced">
    <ng-container matColumnDef="numfacture">
        <th mat-header-cell *matHeaderCellDef> Num Facture </th>
        <td mat-cell *matCellDef="let element"> {{element.numFactAg}} </td>
    </ng-container>
    <ng-container matColumnDef="cnuf">
        <th mat-header-cell *matHeaderCellDef> CNUF </th>
        <td mat-cell *matCellDef="let element">
            <span *ngIf="element.fournisseur">
                <span *ngIf="element.fournisseur.cnuf">{{element.fournisseur.cnuf}}</span> 
            </span>    
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

数据在材料表中不可见，但在控制台中可见。

Answer 1

您的 DataSource 分配应该在订阅内。

所以，它应该是这样的：

this.factAgService.getFactAgByCriteria(frs.cnuf).subscribe(
    (res: any) => {
    this.factAg = res ? res._embedded.factureAgressoes : [];
    for (const key in this.factAg) {
        if (Object.prototype.hasOwnProperty.call(this.factAg, key)) {
            const element = this.factAg[key];
            element.fournisseur = frs;
            this.factAgressoes.push(element);
        }
     }
     this.dataSourced = new MatTableDataSource(this.factAgressoes);
  }
);

编辑：所以，我所做的是，结合您所有的服务/API 调用。然后订阅所有回复。

首先，您必须导入combineLatest of rxjs。

import { combineLatest } from 'rxjs';

现在方法是：

const subscriptions: any[] = [];
for (const frs of this.chequeSaisi.fournisseur) {
    subscriptions.push({ subscription: this.factAgService.getFactAgByCriteria(frs.cnuf), frs: frs });
}

combineLatest(subscriptions.map(m => m.subscription)).subscribe(
    (responses) => {
        for (let index = 0; index < responses.length; index++) {
            response = responses[index];
            this.factAg = response ? response._embedded.factureAgressoes : [];
            for (const key in this.factAg) {
                if (Object.prototype.hasOwnProperty.call(this.factAg, key)) {
                    const element = this.factAg[key];
                    element.fournisseur = subscriptions[index].frs;
                    this.factAgressoes.push(element);
                }
            }
         }
         this.dataSourced = new MatTableDataSource(this.factAgressoes);
     }
);