如何通过单击angular2中的+/-图标来扩展和特定的div？

Question

我希望有+图标来扩展和 - 折叠一个特定的div。我有一系列的objrcts所以我将使用* ngFor =“let data of dataArray”进行迭代

我有使用手风琴实现这一目的的例子。但是当我点击+并关闭特定div时，我想打开所有div，当我点击特定div的“ - ”图标时。但手风琴一次只开一个

我想要有类似下面的东西

- data [0] .name

  {{data[0].categoryName}} , {{data[0].groupName}}

- data [1] .name

  {{data[1].categoryName}} , {{data[1].groupName}}

+ data [2] .name + data [3] .name - data [4] .name

  {{data[4].categoryName}} , {{data[4].groupName}}     

我想在自上而下打开它，当内容很大时也需要一个滚动条

Answer 1

1. Angular Boostrap collapse组件
2. *ngIf制作您自己的可折叠html或绑定[隐藏]如果您想要预加载并保留DOM而不显示。然后，您可以使用angular animation modules添加动画。

Answer 2

虽然你自己实现它可能会很有趣，如果你想节省工作，那就有了 n app 那个组件库！

https://github.com/500tech/angular-tree-component 要么 https://github.com/valor-software/ng2-tree

Answer 3

您想要的最基本形式可以通过这种方式创建。

您可以随时添加更多css和样式，使其看起来像您想要的那样。

TS：

import {Component} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div class="div" *ngFor="let data of dataArray; let i = index" (click)="iconChange(i)" style="margin-bottom: 20px">
        <div>
          <i class="fa" [ngClass]="{'fa-plus': flagArray[i] == false, 'fa-minus': flagArray[i] == true}" aria-hidden="true" style="float: left"></i>
          {{data.name}}
          </div>
          <div *ngIf="flagArray[i] == true" class="div2">
            {{data.categoryName}} - {{data.groupName}} 
          </div>
        </div>
        <button (click)="showAll()">Expand All</button>
        <button (click)="hideAll()">Collapse All</button>
    </div>
  `,
  stylesUrl:['./style.css']
})
export class App {

  flagArray = [];

  dataArray = [];

  selectedIndex: number;

  constructor() {

    this.selectedIndex = -1;

    this.dataArray = [
    {name: '1', categoryName: 'A1', groupName: 'G1'},
    {name: '2', categoryName: 'A2', groupName: 'g2'},
    {name: '3', categoryName: 'A3', groupName: 'G3'},
    {name: '4', categoryName: 'A4', groupName: 'G4'}
  ]

    for(let  i=0; i<this.dataArray.length; i++){
      this.flagArray.push(false);
    }
  }

  iconChange(i: number){
    this.flagArray[i] = !this.flagArray[i];
  }

  showAll(){
    for(let  i=0; i<this.dataArray.length; i++){
      this.flagArray[i] = true;
    }
  }

  hideAll(){
    for(let  i=0; i<this.dataArray.length; i++){
      this.flagArray[i] = false;
    }
  }
}

Plunker demo