如何在 angular2 和 typescript 中实现手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37996645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement accordion in angular2 and typescript
提问by Mohit
I am creating list of div dynamically.I want the content of only fist div will display by default.But when user click on second div then content of second should be display and the content of first is hide.And so on with third and forth div.
我正在动态创建 div 列表。我希望默认情况下只显示第一个 div 的内容。但是当用户单击第二个 div 时，应该显示第二个 div 的内容，第一个的内容是隐藏的。依此类推第三个和第四个分区
This is like accordion.Here is my code
这就像手风琴。这是我的代码
<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)}
// }
}
}
回答by Pardeep Jain
PS:- as Alternate
PS：- 作为替代
If you want to use Accordion then why not to use this ?
如果你想使用 Accordion 那么为什么不使用它呢？
http://www.primefaces.org/primeng/#/accordion
http://www.primefaces.org/primeng/#/accordion
PrimeNg provides us all the functionaly needed you just have to add this
PrimeNg 为我们提供了所有需要的功能，您只需添加它
import {Accordion} from 'primeng/primeng';
import {AccordionTab} from 'primeng/primeng';
回答by Guillaume Serrat
Use the index to add the 'active' class if it's the first one.
如果它是第一个，则使用索引添加“活动”类。
*ngFor="#error of errors; let i=index"
div class="acc-header" [class.active]="i == 0" (click)="onClick(i)"
