Question

问题：我有一个JSON对象，其中包含随机级别的嵌套。我想使用ngFor在HTML中解析JSON数组。我之前使用过ngFor，但是因为我们可以为任何对象提供不同数量的子节点，所以我无法为此提出解决方案。我很难找到动态生成HTML页面的一般方法。

JSON：

    [
        {
            name: a,
            children: [
            ]
        },

        {
            name: b,
            children: [
                {
                    name: b1,
                    children: [
                    ]
                },
                {
                    name: b2,
                    children: [

                    ]
                }
            ]
        },
        {
            name: c,
            children: [
                {
                    name: c1,
                    children: [
                    ]
                },
                {
                    name: c2,
                    children: [
                        {
                            name: cc2,
                            children: [
                                {
                                    name: ccc2,
                                    children: [
                                    ]
                                },
                            ]
                        }
                    ]
            }
        ]
    }
]

我的HTML模板：

<div class="tree well">
  <ul>
    <li>
      <span><i class="icon-folder-open"></i> Home Page</span> <a href="">Goes somewhere</a>
      <ul>

        <li>
          <span><i class="icon-minus-sign"></i> Transport </span> <a href="">Goes somewhere</a>
          <ul >
            <!--<li>
              <span><i class="icon-leaf"></i> Transport Page</span> <a href="">Goes somewhere</a>
            </li>-->
          </ul>
        </li>

        <li>
          <span><i class="icon-minus-sign"></i> Transport </span> <a href="">Goes somewhere</a>
          <ul>
            <li>
              <span><i class="icon-leaf"></i> Transport Page</span> <a href="">Goes somewhere</a>
            </li>
          </ul>
        </li>

        <li>
          <span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>

          <ul>
            <li>
              <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
            </li>

            <li>

              <span><i class="icon-minus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a>
              <ul>
                <li>

                  <span><i class="icon-minus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
                  <ul>
                    <li>

                      <span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
                    </li>

                    <li>

                      <span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
                    </li>
                  </ul>
                </li>

                <li>
                  <span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
                </li>

                <li>
                  <span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
                </li>

              </ul>
            </li>
            <li>
              <span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

我找到了一个足智多谋的博客，帮助我找到了我的问题的解决方案： http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0 http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

如何使用角度2在html中显示多个嵌套的对象数组

1 个答案: