Us * ng用于嵌套数组的JSON对象 [英] Us *ngFor for JSON object with nested arrays

问题描述

我有一个JSON对象，它具有多个嵌套对象级别以及嵌套的对象数组。我想知道如何使用Angular2和* ngFor遍历对象，并最终列出打印输出。第一个* ngFor工作，但下一个* ngFor给我和错误说无法读取未定义的属性节点

I I have a JSON object that has several levels of nest objects as well as nested arrays of objects. I would like to know how to use Angular2 and *ngFor to iterate through the object and end up with the listed printed out. The first *ngFor works but the next *ngFor give me and error saying Cannot read property nodes of undefined

当前HTML代码

Current HTML code

<div class="col-md-3">
               <div>
                    <ol>
                         <li *ngFor="let item of videoList" > {{item.title}} </li>
                         <ol>
                              <li *ngFor="let subItem of videoList.item.nodes"> {{subItem.title}} </li>
                         </ol>
                    </ol>
               </div>
         </div>

JSON对象

JSON object

  videoList =  [
          {
               'id':1,
               'title':'Lower Extremities',
               'nodes':[
                    {
                         'id':11,
                         'title':'Cast Receive',
                         'nodes':[
                                   {
                                   'id':111,
                                   'title':'Video 1',
                                   'nodes':[
                                             {
                                             'id':1111,
                                             'title':'Working',
                                             'nodes':[]
                                             },
                                             {
                                             'id':1112,
                                             'title':'Stacking',
                                             'nodes':[]
                                             },
                                        ]
                              },
                              {
                                   'id':112,
                                   'title':'Video 2',
                                   'nodes':[]
                              },
                              {
                                   'id':113,
                                   'title':'Video 3',
                                   'nodes':[]
                              }
                         ]
                    },
                     {
                         'id':12,
                         'title':'Cast Inspection',
                         'nodes':[
                              {
                                   'id':121,
                                   'title':'Video 1',
                                   'nodes':[]
                              },
                              {
                                   'id':122,
                                   'title':'Video 2',
                                   'nodes':[]
                              },
                              {
                                   'id':123,
                                   'title':'Video 3',
                                   'nodes':[]
                              }
                         ]
                    },
                     {
                         'id':13,
                         'title':'Cut & Set',
                         'nodes':[
                              {
                                   'id':131,
                                   'title':'Video 1',
                                   'nodes':[]
                              },
                              {
                                   'id':132,
                                   'title':'Video 2',
                                   'nodes':[]
                              },
                              {
                                   'id':133,
                                   'title':'Video 3',
                                   'nodes':[]
                              }
                         ]
                    }
               ]
          }

编辑
我尝试了给定的答案和所有我收到了一个数字列表1,2和3.这是我做的。

EDIT I attempted the given answer and all I recieved was a list of numbers 1, 2, and 3. Here is what I did.

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
      <ol>
           <li *ngFor="let item of videoList" > {{item.title}} </li>
           <ol>
                <li *ngFor="let subItem of item['nodes']" > {{subItem.title}} </li>
           </ol>
      </ol>
    `
})
export class AppComponent {

videoList = [
    {
      'id':1,
      'title':'Lower Extremities',
      'nodes': [
          {
            'id':11,
            'title':'Second node',
            'nodes': "[]"
          },
          {
            'id':12,
            'title':'Second node',
            'nodes': "[]"
          }
      ]
    },
    {
      'id':2,
      'title':'Second node',
      'nodes': []
    },
    {
      'id':3,
      'title':'third node',
      'nodes': []
    }
  ];
}

1. < ol>
   < li * ngFor =let item ['nodes']的子项目> {{subItem.title}}< / li>
   < / ol>
   < / ol>
   `
   }）
   导出类AppComponent {
   
   videoList = [
   {
   'id'：1，
   'title'：'下肢'，
   '节点'：[
   {
   'id'：11，
   'title'：'Second node'，
   'nodes'：[]
   }，
   {
   'id'：12，
   'title'：'Second node'，
   'nodes'：[]
   }
   ]
   }，
   {
   'id'：2，
   'title'：'Second node'，
   'nodes'：[]
   }，
   {
   'id'：3，
   'title'：'third node'，
   'nodes'：[]
   }
   ];
   
   

推荐答案

 <li *ngFor="let subItem of item['nodes']"> {{subItem.title}} </li>

这篇关于Us * ng用于嵌套数组的JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！