获取 tabView PrimeNG 的当前 header

Question

我想要获取当前 header 的 PrimeNG tabView。我试图通过绑定 activeIndex 属性来做到这一点，但它没有用。

Answer 1

您可以使用@ViewChild 在您的组件中获取对您的 tabView 的引用并绑定到一个变量 selectedIndex 然后您可以获得所选 tavview this.tabView.tabs[this.selectedIndex].header 的 header。

示例代码如下： app.component.ts

import { Component, ViewChild } from '@angular/core';
//imports
import {TabView, TabPanel} from 'primeng/primeng';

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  selectedIndex = 0;
  //class variable
  @ViewChild(TabView) tabView: TabView;

  onChange($event) {
    this.selectedIndex = $event.index;
  }

  getSelectedHeader(){
    console.log(this.tabView.tabs[this.selectedIndex].header);
  }
}

app.component.html

<h2>PrimeNG Issue Template</h2>
<button pButton (click)="getSelectedHeader()" label="selected header"></button>
<p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex">
  <p-tabPanel header="first" [selected]="true">
    <first></first>

  </p-tabPanel>
  <p-tabPanel header="second" cache="false">
    <ng-template pTemplate="content">
      <second></second>
    </ng-template>
  </p-tabPanel>
</p-tabView>

A working plunker

Answer 2

.html

<p-tabView #tabView (onChange)="tabViewChange($event, tabView)">...</p-tabView>

.ts

tabViewChange(event, tabView: TabView) {
 const headerValue = tabView.tabs[event.index].header;
}

获取 tabView PrimeNG 的当前 header

Get current header of the tabView PrimeNG

javascript

angular

primeng

tabview