web-dev-qa-db-fra.com

Angular Colonnes dynamiques de la table des matières sans modèle

Je dois utiliser la table de matériau angular sans modèle, car je ne sais pas ce qui va provenir du service.

Donc, je suis en train d'initialiser mon MatTableDataSource et displayedColumns dynamiquement dans un composant comme celui-ci:

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 du code est ici:

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

Je crée displayedColumns ici dynamiquement, cela signifie; même si je ne sais pas ce qui va provenir du service, je peux le montrer dans un tableau.

Par exemple, displayedColumns peut être comme ça:

  • ["un deux trois quatre cinq" ]

ou

  • ["pile", "débordement", "aide", "moi"

Mais ce n’est pas un problème car je peux le gérer.

Mais quand je veux le montrer en HTML, je ne peux pas le montrer 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-cell * matCellDef = "let element"> {{element.disCol}} </ mat-cell>

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

Sinon, tout va bien sauf cette chose element."disCol's value".

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

enter image description here

Autre exemple utilisant uniquement {{element}}:

enter image description here

Aussi comme vous pouvez le voir:

  1. La source de données de la table change de manière dynamique. Cela signifie que je ne peux pas utiliser {{element.ColumnName}} Facilement, parce que je ne sais même pas de quoi il s'agit.

    • DisplayColumns du premier exemple 'Vazife', 'AdSoyad', 'Kirmizi', 'Mavi', 'Yesil', 'Sari'];
    • DisplayColumns = ['Muhasebe', 'Ders', 'Egitim', 'Harici'] du deuxième exemple;

  2. matHeaderCellDef est correct car il utilise directement {{disCol}}.

== [- Mais je dois lire la valeur de disCol et afficher element.(disCol's value) dans la cellule.

Comment puis-je faire cela?

dynamicinterfaceangular-materialdatasource
11
mevaka

J'ai trouvé la solution :) C'est très très facile mais je ne pouvais pas le voir au début :) seulement comme ça:

        <mat-cell *matCellDef="let element "> {{element[disCol]}}
        </mat-cell>

Je dois utiliser {{element[disCol]}} uniquement en HTML.

Maintenant, tout va bien :)

20
mevaka

Pour un exemple de travail complet basé sur @ mevaka

Où jobDetails$ Est le tableau d'éléments.

columns$ Est équivalent à Object.keys(jobDetails$[0]) et n'est donc qu'un string[]

  <table mat-table [dataSource]="jobDetails$ | async">

    <ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}">
      <th mat-header-cell *matHeaderCellDef>{{disCol}}</th>
      <td mat-cell *matCellDef="let element">{{element[disCol]}}</td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr>
    <tr mat-row *matRowDef="let row; columns: (columns$ | async)"></tr>
  </table>
2
Jack