如何显示相对于列的行数据

Question

我有`

displayColumns = [{name:Id, value: id}{name:Customer, value: Customer},{name:City, value: City},{name:State, value: State},{name:Type, value: Type}]`

行数据为

userInfoList =[ {
"Id": 1,
"Customer": "Ram",
"City": "Hyderabad",
"State" : "Andhra",
"Type" : "Estimation"
},
{
"Id": 2,
"Customer": "Ramya",
"City": "Hyderabad",
"State" : "Andhra",
"Type" : "Order"
},
{
"Id": 3,
"Customer": "Ramakrishna",
"City": "Hyderabad",
"State" : "Andhra",
"Type" : "Sales"
},
{
"Id": 4,
"Customer": "Kishore",
"City": "Hyderabad",
"State" : "Andhra",
"Type" : "Return"
},
{
"Id": 5,
"Customer": "Anil",
"City": "Hyderabad",
"State" : "Andhra",
"Type" : "Purchange"
}
]

我的表格打印部分html是

<table class="table">
<thead>
<tr>
<th class="text-left" *ngFor = "let column of displayColumns">
{{column.name}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let list of userInfoList; let i=index">
<td *ngFor="let key of list" > 
{{list[key]}}
</td>     
</tr>
</tbody>                                    
</table>

听说无法显示关于列的行数据，你能建议我如何找到它吗。。这是打印部分的要求。显示列可以，但无法显示行数据。

Answer 1

像这样的东西应该可以做到

<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Customer</th>
<th>City</th>
<th>State</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of userInfoList  | keyvalue; let i=index">
<td ng-repeat="obj in item"> 
<b>{{item | json}}</b>
</td>  
</tr>
</tbody>    

</table>

Answer 2

i trid like below现在正在工作

<tr *ngFor="let list of userInfoList ; let i=index">
<td *ngFor="let key of list | keyvalue" >                                                                                {{key.value}}
</td>
</tr>