Свернуть не работает в списке рекурсивного свертывания

Question

Я отображаю массив Angular 4 в рекурсивном списке, используя приведенный ниже код.Здесь я рекурсивно передаю элементы данных компоненту tree-view.Я хочу сделать этот список разборным.Свернуть работает только для некоторых элементов списка, а также некоторая часть данных не отображается в списке.В этом Stackblitz можно найти рабочий пример: https://stackblitz.com/edit/angular-udr9de. В этом примере при щелчке раскрывается только первый элемент списка, и он сразу же сворачивается.Другие элементы списка не раскрываются.Я не мог определить проблему здесь.Что мне не хватает?Может ли кто-нибудь помочь мне, обновив Stackblitz?

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {

name = 'Angular';
key: string = "children";
data: Array<Object> = [
  { 
    name: 'Laptop',
    children: [
      {
        name: 'Apple',
        children: [
          {
            name: 'Macbook Air',
            children: [
              {
                name: 'Macbook Air 01'
              }, 
              {
                name: 'Macbook Pro 02'
              }
            ]
          }, 
          {
            name: 'Macbook Pro'
          }
        ]
      },
      { 
        name: 'Microsoft',
        children: [{name: 'Surface Pro'}]
      },
      { 
        name: 'AZUS',
        children: [{name: 'Azus Pro'}]
      }
    ]
  },
  {
    name: 'Desktop',
    children: [
      {
        name: 'Apple2',
        children: [{name: 'Macbook Air'}, {name: 'Macbook Pro'}]
      },
      { 
        name: 'Microsoft2',
        children: [{name: 'Surface Pro'}]
      },
      { 
        name: 'AZUS2',
        children: [{name: 'Azus Pro'}]
      }
    ]
  }
 ]
}

app.component.html

<div class="card" style="background: rgba(255, 255, 255, 0.50);">
  <div class="card-header">
    <strong>EXAMPLE</strong>
  </div>
  <div class="card-block" style="padding-left: 25px;padding-right: 25px;">

    <div class="just-padding">
      <tree-view [data]="data" [key]="key"></tree-view>
    </div>  

  </div>
</div>

дерево-view.component.ts

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

}

tree-view.component.html

  <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>
      <div class="list-group collapse pl-3" id="#item-{{i}}">
          <a href="#" class="list-group-item list-group-item-warning">
            <i class="glyphicon glyphicon-unchecked"></i><strong>NAME </strong> : {{item.name}}
          </a>
      </div>
      <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>

tree-view.component.css

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