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