Question

我使用的是PrimeNG标签，在对此进行了大量研究后，我找不到一个好的解决方案。我点击按钮时尝试显示标签2 。基本上，我希望通过默认 t隐藏标签2，并在点击按钮时显示它。有谁知道如何实现这一目标？非常感谢先进！

这是我的代码：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

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

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

希望有帮助

单击按钮时如何显示标签？

2 个答案: