如何在angular 8中显示嵌套对象到模板?

Question

这是我收到的对象，我想打印nxt_performance_metrics作为表。我不知道如何继续。如果有人知道，请帮助我。

Bearing: {
precision: "0.99", recall: "1.00", f1-Score: "0.99", support: "90"
}
Flywheel: {
precision: "1.00", recall: "0.99", f1-Score: "0.99", support: "90"
}
Healthy: {
precision: "1.00", recall: "0.99", f1-Score: "0.99", support: "90"
}
LIV: {
precision: "0.99", recall: "0.99", f1-Score: "0.99", support: "90"
}
LOV: {
precision: "0.98", recall: "1.00", f1-Score: "0.99", support: "90"
}
NRV: {
precision: "1.00", recall: "0.98", f1-Score: "0.99", support: "90"
}
Piston: {
precision: "1.00", recall: "1.00", f1-Score: "1.00", support: "90"
}
Riderbelt: {
precision: "0.98", recall: "0.99", f1-Score: "0.98", support: "90"
}
accuracy: {
precision: " ", recall: " ", f1-Score: "0.99", support: "720"
}
macro avg: {
precision: "0.99", recall: "0.99", f1-Score: "0.99", support: "720"
}
weighted avg: {
precision: "0.99", recall: "0.99", f1-Score: "0.99", support: "720"
}

Answer 1

您可以使用Object.keys()来遍历响应。

//component.html

<table>
<thead>
<th>precision</th>
<th>recall</th>
<th>f1-Score</th>
<th>support</th>
</thead>
<tbody>
<tr *ngFor="let item of Object.keys(response)">
<td>{{item.precision}}</td>
// add more columns based on keys
</tr>
</tbody>
</table>