Necesito usar angulares material de la tabla, sin modelo, porque no sé lo que va a venir de servicio.

Así que estoy inicializando mi MatTableDataSource y displayedColumns de forma dinámica en el componente, como que :

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 parte más importante de código está aquí :

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

Estoy creando displayedColumns aquí de forma dinámica, lo que significa; aún no sé lo que va a venir de servicio, que puede mostrar en la tabla.

Por ejemplo displayedColumns puede ser así:

  • [«uno», «dos» , «tres» , «cuatro» , «cinco» ]

o

  • [«pila»,»desbordamiento»,»ayuda»,»me]

Pero no es problema porque yo puedo manejar esto.


Pero cuando quiero mostrar en HTML, yo no puedo mostrar correctamente porque de
matCellDef cosa:

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>

Mi problema está aquí:

< mat-celular *matCellDef=»vamos a elemento «> {{elemento.disCol}} < /mat-celular>

De hecho, quiero mostrar element."disCol's value" en la celda, pero no sé cómo puedo hacer eso.

De otra manera, todo está bien excepto este element."disCol's value" cosa.


Cuando yo uso {{element.disCol}} para mostrar value of element that has disCols's value , todas las celdas están vacías como que:

Angular Material de Tabla Dinámica Columnas sin modelo

Otro ejemplo de que el uso de {{element}} sólo:

Angular Material de Tabla Dinámica Columnas sin modelo


Como se puede ver:

  1. De la tabla de origen de datos está cambiando de forma dinámica. Esto significa que no puede utilizar {{element.ColumnName}} fácilmente, porque ni siquiera sé lo que es.

    • Primer Ejemplo del displayedColumns = [‘Vazife’, ‘AdSoyad’, ‘Se’, ‘Mavi’, ‘Yesil’, ‘Sari’];
    • Segundo Ejemplo del displayedColumns = [‘Muhasebe’, ‘Der’, ‘Egitim’, ‘Harici’];
  2. matHeaderCellDef es correcta , porque es el uso de {{disCol}} directamente.

Pero necesito leer disCol del valor, y mostrar element.(disCol's value) en la célula.

¿Cómo puedo hacer eso ?

InformationsquelleAutor mevaka | 2018-04-17

2 Comentarios

  1. 20

    He encontrado la solución 🙂
    Es muy muy fácil, pero yo no podría ver en la primera 🙂
    sólo como eso :

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

    Debo utilizar {{element[disCol]}} sólo en HTML.

    Ahora , todo está bien:)

    • Puede usted por favor enviarme toda la muestra de código para crear dinámica de la columna de la API y rellenar la cuadrícula
    • He añadido un ejemplo completo a continuación
  2. 2

    Para un trabajo completo de ejemplo basado en el @mevaka del

    Donde jobDetails$ es la matriz de elementos.

    columns$ es equvilent a Object.keys(jobDetails$[0]) así que es sólo 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>
    

Dejar respuesta

Please enter your comment!
Please enter your name here