如何在 Angular 2.0 中以编程方式触发 PrimeNG Accordion Click? [英] How to trigger PrimeNG Accordion Click programmatically in Angular 2.0?
本文介绍了如何在 Angular 2.0 中以编程方式触发 PrimeNG Accordion Click?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个如下所示的手风琴.
当链接被点击时,我需要触发所有 p-accordianTab 元素的点击事件.
怎么可能?
<a (click)="openCloseAll()" >{{openCloseAllText}} all</a><p-accordion [multiple]="true"><div class="row" *ngFor="let category of result.Categories"><p-accordionTab #accordianTab header="{{category.Name}}"></p-accordionTab>
</p-手风琴>
我尝试将此#accordionTab"添加到元素并从 TypeScript 访问它,但不起作用:
@ViewChild('accordionTab') 手风琴标签:ElementRef;openCloseAllText: string = "打开";openCloseAll() {//获取所有手风琴并单击它们this.openCloseAllText = this.openCloseAllText ===打开"?"关闭" : "打开";this.accordionTab.nativeElement.click();}类型错误:无法读取未定义的属性nativeElement"
解决方案
为什么不直接使用手风琴本身的 tabs 属性?
<p-accordionTab header="标题内容">正文内容</p-accordionTab></p-手风琴>@ViewChild('accordion') 手风琴:手风琴;closeAllAccordionTabs() {if(!isNullOrUndefined(this.accordion.tabs)){for(让这个.accordion.tabs的标签){if(tab.selected) tab.selected = false;}}}openAllAccordionTabs() {if(!isNullOrUndefined(this.accordion.tabs)){for(让这个.accordion.tabs的标签){if(!tab.selected) tab.selected = true;}}}
I have an accordion as shown below.
When the link is clicked, I'd need to trigger the click event of all p-accordianTab elements.
How is it possible?
<a (click)="openCloseAll()" >{{openCloseAllText}} all</a>
<p-accordion [multiple]="true">
<div class="row" *ngFor="let category of result.Categories">
<p-accordionTab #accordianTab header="{{category.Name}}">
</p-accordionTab>
</div>
</p-accordion>
I tried adding this "#accordionTab" to the element and accessing it from TypeScript but doesn't work:
@ViewChild('accordionTab') accordionTab: ElementRef;
openCloseAllText: string = "Open";
openCloseAll() {
// get all accordions and click them
this.openCloseAllText = this.openCloseAllText === "Open" ? "Close" : "Open";
this.accordionTab.nativeElement.click();
}
TypeError: Cannot read property 'nativeElement' of undefined
解决方案
Why not just use the tabs-property of the accordion itself?
<p-accordion #accordion>
<p-accordionTab header="Header Content">
Body Content
</p-accordionTab>
</p-accordion>
@ViewChild('accordion') accordion: Accordion;
closeAllAccordionTabs() {
if(!isNullOrUndefined(this.accordion.tabs)){
for(let tab of this.accordion.tabs) {
if(tab.selected) tab.selected = false;
}
}
}
openAllAccordionTabs() {
if(!isNullOrUndefined(this.accordion.tabs)){
for(let tab of this.accordion.tabs) {
if(!tab.selected) tab.selected = true;
}
}
}
这篇关于如何在 Angular 2.0 中以编程方式触发 PrimeNG Accordion Click?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文