html - 列表组不会在 Angular 递归列表中显示为子列表

Question

我在 Angular 2 中有一个列表，我像在 https://steemit.com/utopian-io/@jaysermendez/angular-tricks-recursively-rendering-a-tree-structure 中一样递归地渲染它.我在上面的教程中尝试了同样的事情，而不是在无序列表中显示，我想生成一个可折叠列表，如 https://jsfiddle.net/ann7tctp/ .在无序列表中显示效果很好。但是，当尝试显示为可折叠列表时，我无法将元素显示为层次结构。

Code to display as unordered list

<ul *ngIf="items.length">
  <li *ngFor="let item of items">
    {{item.name}}
    <tree-view *ngIf="item[key]?.length" [key]="key" [data]="item[key]"></tree-view>
  </li>
</ul>

Result

Code to display as collapsible list

 <div class="list-group collapse" id="item-1" *ngFor="let item of items">

  <a href="#item-1-1" class="list-group-item list-group-item-warning" data-toggle="collapse">
    <i class="glyphicon glyphicon-chevron-right"></i><strong>{{item.name}}</strong>
  </a>

  <div class="list-group collapse" id="item-1-1">
      <tree-view *ngIf="item[key]?.length" [key]="key" [data]="item[key]"></tree-view>
  </div>

</div>

Result

.

styles

.just-padding {
    padding: 15px;
}

.list-group.list-group-root {
    padding: 0;
    overflow: hidden;
}

.list-group.list-group-root .list-group {
    margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
    border-radius: 0;
    border-width: 1px 0 0 0;
}

.list-group.list-group-root > .list-group-item:first-child {
    border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
    padding-left: 30px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
    padding-left: 45px;
}

.list-group-item .glyphicon {
    margin-right: 5px;
}

我应该如何修改我的 HTML 以显示层次结构中的元素？

Answer 1

我从来没有使用过 Angular 的 Bootstrap ，但我认为你的方向是正确的，这就是你的 TreeView 组件模板的样子，递归调用 TreeView

<div class="just-padding">
  <div class="list-group list-group-root well">
    <ng-container *ngFor="let item of data; let i = index">
      <a href="#item-{{i}}" class="list-group-item" data-toggle="collapse" *ngIf="item[key] && item[key].length else nocollapse">
        <i class="glyphicon glyphicon-chevron-right"></i>
        {{item.name}}
      </a>
      <ng-template #nocollapse>
        <a href="#item-{{i}}" class="list-group-item">{{item.name}}</a>
      </ng-template>
      <div class="list-group collapse" id="item-{{i}}" *ngIf="item[key] && item[key].length">
        <tree-view [data]="item[key]" [key]="key"></tree-view>
      </div>
    </ng-container>
  </div>
</div>

和 typescript 文件

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

@Component({
  selector: 'tree-view',
  templateUrl: './tree-view.component.html',
  styleUrls: ['./tree-view.component.css']
})
export class TreeViewComponent {
  @Input() data: Array<object>;
  @Input() key: string;
  constructor() { }

}

我无法根据您的 js-fiddle 使 Bootstrap 工作，但希望它能与您的设置一起工作。休息一切都类似于您的代码。

已更新 Stackblitz https://stackblitz.com/edit/angular-5tfnb4