why the dataSource is not displayed in my mat-table?

Question

I'm trying to display the factureagressoes in mat-table. The header is displayed but the data is not displayed.

No error is displayed in the console.
The datasource has a data.

component.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>

Data is not visible in the material table but it is visible in the console.

Answer 1

Your DataSource assignment should be inside the subscription.

So, it should look like:

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);
  }
);

Edit: So, what I have done is, combined all your service/API calls. Then subscribed to all the responses.

First, you have to import combineLatest of rxjs.

import { combineLatest } from 'rxjs';

Now the method will be:

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);
     }
);