list-group does not appear as child list in Angular recursive list

问题

I have a list in Angular 2 and I am rendering it recursively like in https://steemit.com/utopian-io/@jaysermendez/angular-tricks-recursively-rendering-a-tree-structure. I am trying the same thing in the above tutorial and instead of displaying in an unordered list, I want to produce a collapsible list like in https://jsfiddle.net/ann7tctp/. Displaying in unordered list works fine. However, when trying to display as collapsible list, I couldn't display the items as an hierarchy.

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

How should I modify my HTML to display the items in an hierarchy?

回答1:

I never worked with bootstrap with Angular but I think you were going in the right direction this is how your tree-view component template should looklike, calling tree-view recursively

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

and the typescript file

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() { }

}

I couldn't get the bootstrap working based on your js-fiddle but hope it works with the setup you have. Rest everything is similar to your code.

Updated Stackblitz https://stackblitz.com/edit/angular-5tfnb4

来源：https://stackoverflow.com/questions/57951687/list-group-does-not-appear-as-child-list-in-angular-recursive-list

标签

html

css

angular

bootstrap-4