Question

我有以下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>

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

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

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

1 个答案: