Question

我想获得PrimeNG tabView的当前标题。我尝试通过绑定activeIndex属性来实现它，但它没有工作。

Answer 1

您可以使用@ViewChild在组件中获取对tabView的引用，并将其绑定到selectedIndex变量，然后您可以获取所选tavview this.tabView.tabs[this.selectedIndex].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

获取tabView PrimeNG的当前标头

1 个答案: