使用 ngFor 以特定布局呈现表格答案

【问题标题】：using ngFor to render table in a particular layout使用 ngFor 以特定布局呈现表格
【发布时间】：2016-10-09 13:44:09
【问题描述】：

我有以下 json 数组字符串

     queryResults= 
    [
          {"name":"cliff","age":"20","hobby":"tennis","email":"cliff@gmail.com"},
          {"name":"jason","age":"30","hobby":"golf","email":"jason@gmail.com"}
    ]

我需要使用 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>cliff@gmail.com</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>jason@gmail.com</td>
        </tr>
    </table>

我怎样才能做到这一点？任何建议都会有所帮助，谢谢

【问题讨论】：

阅读本文，对你有帮助stackoverflow.com/questions/36364556/…
在你添加关于 ngFor 的 stackoverflow 100 个示例的问题之前检查一下，或者检查 angular 2 网站的基础知识angular.io/docs/ts/latest/quickstart.html

标签： javascript html angularjs angular

【解决方案1】：

假设你的 JSON 是数组形式，你可以像这样使用 *ngFor 来解决这个问题

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

【讨论】：