Al crear una tabla dinámica me encuentro con el siguiente problema, los valores que pertenecen a claves con subclave no los procesa. (por ejemplo: "vehiculos.turismo")
let datos = [
{
"ciudad": "Bembibre",
"vehiculos":{
"turismo": "30",
"todoterreno": "40",
"camiones": "20"
}
},
{
"ciudad": "Camponaraya",
"vehiculos":{
"turismo": "34",
"todoterreno":"22",
"camiones": "10"
}
},
{
"ciudad": "Benuza",
"vehiculos":{
"turismo": "43",
"todoterreno":"20",
"camiones": "11"
}
}
]
tablaejemplodinamica.ts
// defino los campos
columnas:['ciudad', 'vehiculos.turismo', 'vehiculos.todoterreno', "vehiculos.camiones"]
Si la construyo de esta forma sí procesa los datos. tablaestatica.component.html
<!-- tablaestatica.component.html -->
<mat-table #table [dataSource]="datos" class="mat-elevation-z8">
<ng-container [matColumnDef]="columna">
<th mat-header-cell *matHeaderCellDef> {{columna}}</th>
<td mat-cell *matCellDef="let element;"> {{element["ciudad"]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnas"></tr>
<tr mat-row *matRowDef="let row; columns: columnas;"></tr>
</mat-table>
<mat-table #table [dataSource]="datos" class="mat-elevation-z8">
<ng-container [matColumnDef]="columna">
<th mat-header-cell *matHeaderCellDef> {{columna}}</th>
<td mat-cell *matCellDef="let element;"> {{element["vehiculos.turismo"]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnas"></tr>
<tr mat-row *matRowDef="let row; columns: columnas;"></tr>
</mat-table>
<mat-table #table [dataSource]="datos" class="mat-elevation-z8">
<ng-container [matColumnDef]="columna">
<th mat-header-cell *matHeaderCellDef> {{columna}}</th>
<td mat-cell *matCellDef="let element;"> {{element["vehiculos.todoterreno"]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnas"></tr>
<tr mat-row *matRowDef="let row; columns: columnas;"></tr>
</mat-table>
<mat-table #table [dataSource]="datos" class="mat-elevation-z8">
<ng-container [matColumnDef]="columna">
<th mat-header-cell *matHeaderCellDef> {{columna}}</th>
<td mat-cell *matCellDef="let element;"> {{element["vehiculos.camiones"]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnas"></tr>
<tr mat-row *matRowDef="let row; columns: columnas;"></tr>
</mat-table>
Si la construyo dinámica no procesa los datos:
tabladinamica.component.html
<mat-table #table [dataSource]="datos" class="mat-elevation-z8">
<ng-container [matColumnDef]="columna" *ngFor="let columna of columnas;">
<th mat-header-cell *matHeaderCellDef> {{columna}}</th>
<td mat-cell *matCellDef="let element; let i=dataIndex;"> {{element[columna]}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnas"></tr>
<tr mat-row *matRowDef="let row; columns: columnas;"></tr>
Versión Angular material 9.0.0
tablaestatica.component.html
. Porque defines una tabla por cada dato, tampoco especificas la columna a renderizar solo pones[matColumnDef]="columna"
ycolumna
que es?