使用ngFor渲染表中特定的布局

我有以下的JSON数组的字符串使用ngFor渲染表中特定的布局

 queryResults= 
    [ 
      {"name":"cliff","age":"20","hobby":"tennis","email":"[email protected]"}, 
      {"name":"jason","age":"30","hobby":"golf","email":"[email protected]"} 
    ]

我需要使用ngFor产生以下HTML布局

<table> 
    <tr> 
     <td>name:</td><td>cliff</td> 
     <td>age:</td><td>20</td> 
    </tr> 
    <tr> 
     <td>hobby:</td><td>tennis</td> 
     <td>email:</td><td>[email protected]</td> 
    </tr> 
</table> 



    <table> 
     <tr> 
      <td>name:</td><td>jason</td> 
      <td>age:</td><td>30</td> 
     </tr> 
     <tr> 
      <td>hobby:</td><td>golf</td> 
      <td>email:</td><td>[email protected]</td> 
     </tr> 
    </table>

我怎样才能做到这一点？任何建议将有助于谢谢

来源

2016-06-09 CliffC

使用* ngFor解决这个看了这个，它会帮助你http://stackoverflow.com/questions/36364556/print-attributes-values-from-json-array-in-angular2 –

只是检查之前，您添加问题在本网站上的示例在本网站ngfor或检查角2网站基础https：//角度。 IO /文档/ TS /最新/ quickstart.html – mayur

假设你的JSON是数组形式，你可以这样

<table *ngFor="#it of queryResults"> 
    <tr> 
     <td>Name:</td><td>{{it.name}}</td> 
     <td>Age:</td><td>{{it.age}}</td> 
    </tr> 
    <tr> 
     <td>hobby:</td><td>{{it.hobby}}</td> 
     <td>email:</td><td>{{it.email}}</td> 
    </tr> 
</table>

来源

2016-06-09 04:46:19 Gab

使用ngFor渲染表中特定的布局

回答

相关问题