Quantcast
Channel: Angular material tablas dinámicas. Pasar valores con sub claves - Stack Overflow en español
Viewing all articles
Browse latest Browse all 3

Angular material tablas dinámicas. Pasar valores con sub claves

$
0
0

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


Viewing all articles
Browse latest Browse all 3


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>