[英]How to display nested objects from array in Angular Typescript
I have this array:我有这个数组:
grp = [ {model: "CF650-3C", color: {Orange: 3, Black: 2} }, {model: "HD4533F", color: {Black: 2, Orange: 1} } ]
Those are objects in there that have.model and.color properties and I want to display them in a table so I need access to all.color values in there individually.这些是那里的对象,它们有 .model 和 .color 属性,我想在表格中显示它们,所以我需要单独访问其中的 all.color 值。 So far I've tried iterating over like this:到目前为止,我已经尝试过这样的迭代:
<table class="table table-striped" >
<thead>
<tr >
<th scope="col">Model</th>
<th scope="col">color</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let g of grp">
<tr >
<td>{{ g.model }}</td>
<td>{{ g.color | json }}</td>
</tr>
</ng-container>
</tbody>
Problem is it gets displayed like this and I don't know how to access the different.color keys and values问题是它像这样显示,我不知道如何访问 different.color 键和值
CF650-3C { "Orange": 3, "Black": 2 }
HD4533F { "Black": 2, "Orange": 1 }
Some practices you can use:您可以使用的一些做法:
Iterating the values by using keyvalue pipe使用键值 pipe迭代值
<ng-container *ngFor="let g of grp">
<tr >
<td>
<div *ngFor="let c of g.color | keyvalue">
Key: <b>{{c.key}}</b> and Value: <b>{{c.value}}</b>
</div>
</td>
<td>{{ g.model }}</td>
</tr>
</ng-container>
Create a component and set your object as @input StackBlitz创建一个组件并将您的 object 设置为 @input StackBlitz
<ng-container *ngFor="let g of grp">
<tr >
<td>
<app-color [Color]="g.color"></app-color>
</td>
<td>{{ g.model }}</td>
</tr>
</ng-container>
Create a custom pipe that return a value based on your object UltimateCourses创建一个自定义 pipe,它根据您的 object UltimateCourses返回一个值
<ng-container *ngFor="let g of grp">
<tr >
<td>{{ g.model }}</td>
<td>{{ g.color | mycolorpipe }}</td>
</tr>
</ng-container>
You can do it like this:你可以这样做:
<ng-container *ngFor="let g of grp">
<tr >
<td>{{ g.model }}</td>
<td>{{ Object.keys(g.color) }}</td>
<td>{{ Object.values(g.color) }}</td>
</tr>
</ng-container>
You have to iterate through the color object *ngFor="let c of g.color"您必须遍历颜色 object *ngFor="let c of g.color"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.