angular2显示嵌套的json列表

时间:2017-06-22 08:52:51

标签: html angular angular2-template ngfor

我在angular2模板表中遇到了一个小问题。 我有以下json:

users : 
{
      userid : 123,
      username: 'test',
      acc : [
          {
                accid: 382746,
                cyc: [
                {
                    cycid: 28734,
                    det: [
                        {
                            detid: 239876
                        }
                },
                {
                    cycid: 3728,
                    det :[
                        {
                            detid: 632
                        },
                        {
                            detid: 2783
                        }       
                },
                {
                    cycid: 3729,
                    det :[
                        {
                            detid: 633
                        },
                        {
                            detid: 2785
                        },
                        {
                            detid: 78236
                        }
                    ]
                 }
         }
     ]
}

我想在acc表中显示最后一个cyc和最后一个cyc的最后一个。 如下:

---------------------------------------------------------------------
|      acc id           |       cyc id            |       det id    |
---------------------------------------------------------------------
|     382746            |       3729              |      78236      |
---------------------------------------------------------------------

知道该怎么做吗?

2 个答案:

答案 0 :(得分:1)

  

我不确定,这可能提供一些线索:

<table class="table table-bordered width-150">
<tr>
    <th>accid</th>
    <th>cycid</th>
    <th>detid</th>
</tr>
<div *ngFor="let user of users; let userIndex = index">
    <div *ngFor="let accItem of user.acc ; let accIndex=index">
        <div *ngIf="userIndex == 0">
            <div *ngFor="let cyc of accItem.cyc  ; let cycIndex=index">
                <div *ngIf="cycIndex==users[userIndex].acc[accIndex]?.cyc.length-1">
                    <div *ngFor="let det of cyc.det   ; let detIndex=index">
                        <div *ngIf="detIndex==users[userIndex].acc[accIndex]?.cyc[cycIndex]?.det.length-1">
                            <tr>
                                <td>{{accItem.accid}}</td>
                                <td>{{cyc.cycid}}</td>
                                <td>{{ det.detid}}</td>
                            </tr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</table>

答案 1 :(得分:0)

使用3 ng如下所示。

 <table *ngFor="let acc of users.acc">
     <table *ngFor="let cyc of acc.cyc">
        <table>
            <tr  *ngFor="let det of cyc.det">
            <td></td>//acc.details
            <td></td>//cyc.details
            <td></td>//det.details
            </tr>
        </table>
     </table>
 </table>