angular - 如何显示关于列的行数据

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

我喜欢它现在的工作

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

Answer 2

像这样的事情应该这样做

<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>