如何在Angular 2.0中以编程方式触发PrimeNG Accordion Click？

Question

我有如下所示的手风琴。

单击链接后，我需要触发所有p-accordianTab元素的click事件。

这怎么可能？

<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>

我尝试将此“ #accordionTab”添加到元素中并从TypeScript访问它，但不起作用：

@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

Answer 1

为什么不只使用手风琴本身的弹片属性呢？

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

Answer 2

我能够使用与您相同的方法来完成此工作，但将模板变量移动到自定义 p-header 内的元素，而不是 p-accordion-Tab 上。

<p-accordionTab>
    <p-header>
        <span #header>
            Header Content
        </span>
    </p-header>
    Body Content
</p-accordionTab>

他们的文档页面底部有有关使用自定义标题内容的信息：https://www.primefaces.org/primeng/#/accordion