单击按钮时如何显示选项卡？

Question

我正在使用 PrimeNG 选项卡，对此进行了大量研究后，我找不到好的解决方案。单击按钮时，我试图显示 Tab 2。基本上，我希望 默认隐藏选项卡 2t 并在单击按钮时显示它。有谁知道如何做到这一点？非常感谢！

这是我的代码：PLUNKER

<p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex">
 <p-tabPanel header="first" [selected]="true">
  <first></first>

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

Answer 1

如何显示标签页？您只需向此选项卡添加一个条件，以便通过在要管理的 p-tabPanel 上添加 *ngIf 指令来显示或不显示它：

<p-tabPanel header="second" *ngIf="showTab2">
    Content of tab 2
</p-tabPanel>

然后你只需要将 showTab2 布尔值初始化为 false 以隐藏开头的选项卡。最后在点击按钮显示的时候设置为true。

showTab2 = false;

showSecondTab() {
    this.showTab2 = true;
}

Plunker

Answer 2

可能会对某人有所帮助。在最新的primeng V6及以上版本上你可以找到名为Active Index的属性。使用这个你可以很容易地触发按钮点击事件。

<p-tabView [activeIndex]="index">
    <p-tabPanel header="Header 1">
        Content 1
    </p-tabPanel>
    <p-tabPanel header="Header 2">
        Content 2
    </p-tabPanel>
</p-tabView>

在你的 ts 文件中：

index: number = 0; 

 showSecondTab() {
    this.index = (this.index === 0) ? this.index =1 : this.index ;
  }

希望对您有所帮助

单击按钮时如何显示选项卡？

How do you show tab when clicking a button?

typescript

angular2-template

primeng

angular