json 使用ngFor迭代嵌套对象

js5cn81o 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(175)

我有JSON对象：

content = 
[
{
   "id":1,
   "name":"test",
   "parent":{
      "name":"test2",
      "subParent":{
         "name":"test3",
         "subParent":{
            "name":"test4",
            "subParent":{
               "name":"test5",
               "subParent":null
            }
         }
      }
   }
}
]

如何迭代每个嵌套对象并在Angular中显示数据？
我试着用ngFor做，但是不起作用

JSON

来源：https://stackoverflow.com/questions/74865233/iterate-nested-objects-using-ngfor

2条答案

按热度按时间

rsaldnfx1#

这里有很多选项，但是recursive templates可能会有帮助。
如果嵌套的深度是动态的，则这一点特别有用

https://netbasal.com/recursion-in-angular-components-1cd636269b12

Example from above article

@Component({
  selector: 'comments',
  template: `
     <div *ngFor="let comment of comments">
      <ul>
       <li>
         {{comment.text}}
         <comments [comments]="comment.comments" *ngIf="comment.comments"></comments>
       </li>
      </ul>
    </div>
  `,
})
export class CommentComponent {
  @Input() comments;
}

赞(0）回复(0）举报 2022-12-24

0wi1tuuw2#

<ul>
  <li *ngFor="let data of content">
    {{data.id}}
    <ul>
      <li *ngFor="let p of data.parent">
        {{p.name}}
      </li>
    </ul>
  </li>
</ul>

你可以尝试类似的方法，但是recursive templates对我来说是正确的方法。
此致，

赞(0）回复(0）举报 2022-12-24

我来回答

json 使用ngFor迭代嵌套对象

2条答案

相关问题

热门标签

最新问答