Tengo una tabla de material angular en mi HTML, y usé como ejemplo una tabla expandible porque me conviene más que otros tipos. Esta tabla exacta también utiliza nombres de columnas/filas vinculantes para una matriz de cadenas llamada "columnsToDisplay".
<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8"> <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay"> <th mat-header-cell *matHeaderCellDef> {{column}} </th> <td mat-cell *matCellDef="let element"> {{element[column]}} </td> </ng-container> ... tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr> <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="element-row" [class.example-expanded-row]="expandedElement === element" (click)="expandedElement = expandedElement === element ? null : element"> </tr> <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr> </table>Sin embargo, las propiedades que quiero mostrar en esta tabla no tienen los mismos nombres que las propiedades que nombran columnas. Mientras que las propiedades que nombran columnas se ven así:
columnsToDisplay = [__('TBL.pipeSectionName'), __('TBL.pipeSectionLoss'), __('TBL.pipeSectionType'), __('TBL.pipeSectionLength')]Las columnas que tienen los valores necesarios son parte de una matriz de objetos. ¿Cómo hago que se muestren los valores independientemente de cómo se nombren las columnas en esta tabla?
puedes hacer algo como esto
columnsToDisplay2 = [ { label: 'Weird name label', value: 'name' }, { label: 'Weird weight label', value: 'weight' }, { label: 'Weird symbol label', value: 'symbol' }, { label: 'Weird position label', value: 'position' }, ];y en el html:
<ng-container matColumnDef="{{column.value}}" *ngFor="let column of columnsToDisplay2" > <th mat-header-cell *matHeaderCellDef>{{column.label}}</th> <td mat-cell *matCellDef="let element">{{element[column.value]}}</td> </ng-container>Aquí hay un stackblitz ejecutándose https://stackblitz.com/edit/angular-6b8rmt?file=src%2Fapp%2Ftable-expandable-rows-example.html