Lo que estoy tratando de hacer es tomar una matriz de datos de objetos y crear una función en la que pueda pasar los datos y representar los encabezados de columna y las filas de forma dinámica. Aquí están mis datos de muestra:
let revisions = [ { car: { id: 1000, header: "Toyota" }, revisionDate: { header: "Revision Date", newValue: "08/24/2021", oldValue: "09/15/2020" }, revisionType: { header: "Revision Type", newValue: "Tool Desc.", oldValue: "Tool Number" }, revisionNote: { header: "Revision Note", newValue: "Delete", oldValue: "Delete" }, workStation: { header: "Garage", newValue: "New garage", oldValue: "Old garage" } }Para mi función, he intentado usar 2 bucles for, sin embargo, parece que no puedo descifrar cómo obtener las propiedades en la matriz. Lo que he probado:
getHeaders(revisions) { var prop; var rowProp; for (rowProp = 0; rowProp < revisions.length; rowProp++) if (rowProp >= 0) { gridData.push({ header: revisions.header }); } for (prop = 0; prop < revisions.length; prop++) { if (prop === "oldValue") { gridData.push({ field: "revisionDate", header: revisions.header + " (Existing)" }); } if (prop === "newValue") { gridData.push({ field: "revisionDateNew", header: revisions.header + " (New)" }); } else { gridData.push(revisions); } } return gridData; }Aquí está el html por si acaso:
<tr> <th *ngFor="let col of columns"> {{col.header}} </th> </tr>Gracias por la ayuda.
Si sus objetos permanecen construidos igual:
{ car:{...}, revisionDate:{...}, revisionType:{...}, revisionNote:{...}, workStation:{...} }Entonces, ni siquiera necesita crear una función para mostrar esos datos en una tabla. Aquí hay un diseño de tabla que podría hacer:
<table> <th class="row" > <div class="col-2">{{ revisions[0].car.header }}</div> <div class="col-2">{{ revisions[0].revisionDate.header }}</div> <div class="col-2">{{ revisions[0].revisionType.header }}</div> <div class="col-2">{{ revisions[0].revisionNote.header }}</div> <div class="col-2">{{ revisions[0].workStation.header }}</div> </th> <td class="row" *ngFor="let rev of revisions"> <div class="col-2">{{ rev.car.id }}</div> <div class="col-2">{{ rev.revisionDate.newValue }}</div> <div class="col-2">{{ rev.revisionType.newValue }}</div> <div class="col-2">{{ rev.revisionNote.newValue }}</div> <div class="col-2">{{ rev.workStation.newValue }}</div> </td> </table> revisions[0] se usa solo para obtener el primer objeto y acceder a los encabezados para su visualización. Luego, después de eso, usa su *ngFor="" para recorrer cada objeto y mostrar los datos dentro de esos elementos.