0
255
VistasAngular: divide la etiqueta td en columnas separadas dinámicamente
Estoy tratando de dividir dinámicamente el elemento de la tabla en sus propias columnas separadas. Mi resultado deseado se ve así: 
El valor de nombre y apellido siempre es 1, pero los valores de asignaturas y grado son dinámicos (puede haber 2 columnas o más).
Estos son mis datos:
data = [ { student: 'Student 1', name: 'Alex', surname: 'Smith', subjects: ['Math','Geometry'], grade: ['A','B'], }, { student: 'Student 2', name: 'Michael', surname: 'Laurent', subjects: ['Math','Geometry'], grade: ['B','C'], }, { student: 'Student 3', name: 'Sophie', surname: 'Miller', subjects: ['Math','Geometry','English'], grade: ['A','A','B'], }, ];HTML:
<table> <thead> <tr> <th></th> <th *ngFor="let column of data">{{ column.student }}</th> </tr> </thead> <tbody> <tr *ngFor="let row of rows"> <th>{{ row.charAt(0).toUpperCase() + row.slice(1) }}</th> <td *ngFor="let item of data">{{ item[row] }}</td> </tr> </tbody> </table>Aquí hay un ejemplo de stackblitz: https://stackblitz.com/edit/angular-pzgohu ¿Alguien sabe cuál podría ser la solución? Intenté poner span dentro de la etiqueta td y recorrer el .length, pero funciona mal cuando pongo length en la cadena.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar una condición basada en el valor de la fila o puede usar typeof para verificar si es una cadena o una matriz https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
<table> <thead> <tr> <th></th> <th *ngFor="let column of data">{{ column.student }}</th> </tr> </thead> <tbody> <tr *ngFor="let row of rows"> <th>{{ row.charAt(0).toUpperCase() + row.slice(1) }}</th> <td *ngFor="let item of data"> <span *ngIf="row !== 'subjects' && row !== 'grade'"> {{ item[row] }} </span> <table *ngIf="row === 'subjects' || row === 'grade'"> <tr> <td *ngFor="let subItem of item[row]"> {{ subItem }} </td> </tr> </table> </td> </tr> </tbody> </table>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta