PrimeNG Accordionをトリガする方法Angular 2.0をプログラムでクリックしますか？

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」を追加し、活字体からアクセスしようとしたが動作しません：

@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-Tabの代わりにカスタムp-headerの中の要素に移動します。

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

彼らのドキュメントのページには、カスタムヘッダーコンテンツの使用についての下部に情報を持っていますhttps://www.primefaces.org/primeng/#/accordion

Answer 2

理由だけではなく、アコーディオン自体のタブ・プロパティを使用していませんか？

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