list-group在Angular递归列表中未显示为子列表 [英] list-group does not appear as child list in Angular recursive list

问题描述

我在Angular 2中有一个列表，并且像 https://steemit.com/utopian-io/@jaysermendez/angular-tricks-recursively-rendering-a-tree-structure .我正在上面的教程中尝试相同的操作，而不是显示在无序列表中，而是要生成一个可折叠的列表，如 https://jsfiddle.net/ann7tctp/.在无序列表中显示可以正常工作.但是，当尝试显示为可折叠列表时，我无法将项目显示为层次结构.

显示为无序列表的代码

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

结果

显示为可折叠列表的代码

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

结果

.

样式

.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以在层次结构中显示项目?

解决方案

我从未使用过Angular引导程序，但我认为您的方向正确，这就是树视图组件模板的样子，即调用树视图递归

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

和打字稿文件

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小提琴启动引导程序，但希望它可以与您使用的设置一起使用.其余的一切都与您的代码相似.

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

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?

解决方案

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

这篇关于list-group在Angular递归列表中未显示为子列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！