2

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

2
  • no entiendo lo que haces en tablaestatica.component.html. Porque defines una tabla por cada dato, tampoco especificas la columna a renderizar solo pones [matColumnDef]="columna" y columna que es?
    – hawks
    Commented el 21 may. 2020 a las 12:50
  • Cierto, fue un error en el copia y pega, gracias.
    – Pyter pam
    Commented el 22 may. 2020 a las 16:19

2 respuestas 2

0

El error lo tienes en los data-binding

tabladinamica.component.html

La parte modificada sería esta:

{{element[<b>{{</b>columna<b>}}</b>]}}

quedando el código así:

<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>

Resumiendo:

Estas haciendo una llamada al elemento element["columna"], elemento que no existe.

Al hacer una llamada a element[{{columna}}] que sería lo mismo que poner
element["ciudad"] > element["vehiculos.turismo"] > etc.

1
  • Gracias por contestar. Si utilizo la expresión que me indicas da error de sintaxis. Si utilizo{{element[columna]}} no da error, los valores de la propiedad ciudad los pinta, pero los de vehiculos.turismo no.
    – Pyter pam
    Commented el 22 may. 2020 a las 18:58
0

Solucionado: Para solucionarlo hice un reduce de las propiedades de esta forma queda: En tablaejemplodinamica.component.ts

columnas:['ciudad', 'vehiculos.turismo', 'vehiculos.todoterreno', "vehiculos.camiones"];

damePropiedades= (obj, path) => (
  path.split('.').reduce((o, p) => o && o[p], obj)
)

y en tablaejemplodinamica.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;"> {{damePropiedades(element, columna)}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnas"></tr>
    <tr mat-row *matRowDef="let row; columns: columnas;"></tr>
</mat-table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.