如何在 angular2 和 typescript 中实现手风琴

Question

我正在动态创建 div 列表。我只想要拳头的内容 默认情况下会显示 div。但是当用户单击第二个 div 时 第二个的内容应该是显示，第一个的内容是隐藏。依此类推，第三个和第四个div。

这就像手风琴。这是我的代码

<div class="content-area">
  <div class="container-fluid">
    <div class="accordian">
        <div class="errors-cont" *ngFor="#error of errors">
            <div class="acc-header active" (click)="onClick()">
                <div class="image"><img src="image2/nike.png"></div>
                <div class="text">
                <div class="title">Nike<span>20-04-2016,  03:10 PM</span></div>
                <p>{{error.title}}</p>
                </div>
            </div>
            <div class="acc-desc" [class.hide]="isSpecial">
                <div class="image"></div>
                <div class="text">
                <p>{{error.desc}}</p>
                <div class="acc-block">
                    <div class="title">ERROR TYPE asdf</div>
                    <p>Lorem ipsum dolor sit ame</p>
                </div>
                <div class="acc-block">
                    <div class="title">REASON</div>
                    <p>Lorem ipsum dolor sit ame</p>
                </div>
                <div class="acc-block">
                    <div class="btns">
                    <input name="" type="button" value="RESOLVE" class="transparent">
                    <input name="" type="button" value="IGNORE" class="green">
                    </div>
                </div>
                </div>
            </div>
        </div><!-- end or ngFor loop -->     
    </div>
  </div>
</div>

import {Component} from '@angular/core';
import {HeroService} from './error.service';

import { ROUTER_DIRECTIVES } from '@angular/router';
import {CORE_DIRECTIVES} from '@angular/common';
import {DROPDOWN_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    moduleId: module.id,
    selector: 'errors-view',
    templateUrl: 'errors-view.html',
    providers: [HeroService],
    styleUrls: ['errors.css'],
    directives: [DROPDOWN_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})

export class ErrorsViewComponent {

    errors:string[] = [];
    isClose = true;
    isActive= false;
    isSpecial= false;

    //disValue = true
    constructor(private heroService:HeroService) {
        heroService.loadItems()
            .subscribe(data => this.errors = data);
        console.log('erros will be shown in this page');
    }

    togglePopover() {
        this.isClose = !this.isClose;
    }

    onClick(){
        this.isActive = true;
        this.isSpecial = true;
        //this.disValue = false;
        console.log("active false");

        //var x = document.getElementsByClassName("acc-header");

            console.log(x.length);
        // for (var i=0; i < x.length; i++) {
        //  x[i].onclick = function() {deleteIt(this)}

        // }



    }
}

Answer 1

PS:- 作为替代

如果您想使用 Accordion 那么为什么不使用它呢？

http://www.primefaces.org/primeng/#/accordion

PrimeNg 为我们提供了您只需添加它所需的所有功能

import {Accordion} from 'primeng/primeng';
import {AccordionTab} from 'primeng/primeng';

Answer 2

如果是第一个，则使用索引添加“活动”类。

*ngFor="#error of errors; let i=index"

div class="acc-header" [class.active]="i == 0" (click)="onClick(i)"