【问题标题】:angular2 display nested json listangular2显示嵌套的json列表
【发布时间】:2017-11-25 10:52:03
【问题描述】:

我在 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 的最后一个 det。 像下面这样:

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

知道怎么做吗?

【问题讨论】:

  • 您能否描述一下对象之间的关系以及我们如何在问题中进行广泛的映射
  • 示例代码 sn-p 中的括号不匹配。很难解释数据结构。你能想出一个小的 JSFiddle 或者更正数据结构 sn-p 吗?
  • Json 已更新

标签: html angular angular2-template ngfor


【解决方案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>

【讨论】:

  • 它不仅会给出最后一个 cyc 和最后一个 det。但它会给他们所有人
  • 确实我只需要一个 acc par 行,即使 acc 有多个 cyc 和 cyc 有多个 det 并且只显示最后一个 cyc 和 det
  • 你能把它放在 里面吗?
  • 我正在尝试将其放入我的标签中
【解决方案2】:

使用 3 ngFor,如下所示。

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

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签