0
673
VisualizaçõesAngular: uso de ngFor para mostrar datos con encabezados de columna y fila
Tengo problemas para mostrar datos dentro de la tabla que tiene encabezados de columna y fila. Estoy tratando de hacerlo dinámico usando *ngFor. ¿Puede sugerir cómo manejar * ngFor en este caso?
Archivo ts con datos:
export class NewScreen { rows = [ 'Name', 'Surname', 'Subjects', 'Grade', ]; 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'], grade: ['A','A'], }, ]; } HTML: he estado tratando de encontrar una solución para poner dentro de {{???}} que daría como resultado mostrar la siguiente estructura de tabla, pero sin suerte: 
<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 }}</th> <td *ngFor="let value of data | keyvalue">{{ value.value[i + 1] }}</td> </tr> </tbody> </table>1 Respostas
Responde à pergunta0
Creé un ejemplo simple a partir del HTML y los datos que proporcionó https://stackblitz.com/edit/angular-vuzjyk
La razón por la que {{ item.value }} muestra [object Object] es porque no le diste un identificador para elegir la propiedad de ese objeto que deseas mostrar.
Para simplificar, actualicé sus rows[] para que coincidan con las claves de sus datos para usarlos directamente.
rows = ['name', 'surname', 'subjects', 'grade']; En el HTML, simplemente uso esa fila para identificar la propiedad que deseamos mostrar. También en <th> pongo en mayúscula el primer alfabeto de cada encabezado.
<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>Echa un vistazo al enlace de stackblitz que di arriba, si tienes alguna consulta, no dudes en preguntar.