Angulaire de la Table de Matériaux de Colonnes Dynamiques sans modèle

J'ai besoin d'utiliser angulaire de la table de matériaux sans modèle, parce que je ne sais pas ce qui va venir de service.

Donc, je suis à l'initialisation de mon MatTableDataSource et displayedColumns dynamiquement un composant comme suit :

TableComponent :

ngOnInit() {

this.vzfPuanTablo = [] //TABLE DATASOURCE

//GET SOMETHING FROM SERVICE 
this.listecidenKisi = this.listeciServis.listecidenKisi;
this.listecidenVazife = this.listeciServis.listecidenVazife;

//FILL TABLE DATASOURCE 
var obj = {};
for (let i in this.listecidenKisi ){
    for( let v of this.listecidenVazife[i].vazifeSonuclar){
        obj[v.name] = v.value;
    }
    this.vzfPuanTablo.push(obj);
    obj={};
}

//CREATE DISPLAYED COLUMNS DYNAMICALLY
this.displayedColumns = [];
for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

//INITIALIZE MatTableDataSource
this.dataSource = new MatTableDataSource(this.vzfPuanTablo);
}

---

La partie la plus importante de code est ici :

for( let v in this.vzfPuanTablo[0]){
    this.displayedColumns.push(v);
}

Je suis entrain de créer displayedColumns ici dynamiquement, il signifie; même, je ne sais pas ce qui va venir de service, je peux vous le montrer dans le tableau.

Par exemple displayedColumns peut être comme ça:

• ["un", "deux" , "trois" , "quatre" , "cinq" ]

ou

• ["pile","dépassement de capacité","aide","moi]

Mais il n'est pas problème parce que je peux gérer.

---

Mais quand je veux l'afficher en HTML, je ne peux pas afficher correctement à cause de
matCellDef chose:

TableHtml :

    <mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
            <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
            <mat-cell *matCellDef="let element "> {{element.disCol}}
            </mat-cell>
        </ng-container>

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

Mon problème est ici:

< mat-cellule *matCellDef="laisser élément "> {{élément.disCol}} < /mat-cellule>

En fait, je veux afficher element."disCol's value" dans la cellule, mais je ne sais pas comment je peux faire cela.

Sinon, tout est ok sauf que cette element."disCol's value" chose.

---

Lorsque j'utilise {{element.disCol}} pour afficher value of element that has disCols's value , toutes les cellules sont vides comme ça:

Autre exemple que l'utilisation de {{element}} seulement:

---

Aussi comme vous pouvez le voir:

1. Table de source de données est en train de changer de façon dynamique. Cela signifie que je ne peux pas utiliser {{element.ColumnName}} facilement, parce que je ne sais pas encore ce qu'il est.

   • Premier Exemple de displayedColumns = ['Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];
   • Deuxième Exemple est displayedColumns = ['Muhasebe', 'Der', 'Egitim', 'Harici'];

2. matHeaderCellDef est correct , car c'est à l'aide de {{disCol}} directement.

Mais j'ai besoin de lire disCol de la valeur, et l'affichage element.(disCol's value) dans la cellule.

Comment puis-je le faire ?