Primeng选择动态p-tabPanel答案

【问题标题】：Primeng selected dynamic p-tabPanelPrimeng选择动态p-tabPanel
【发布时间】：2019-03-04 23:18:25
【问题描述】：

我使用了primeng的TabView组件，对于动态标签，只有最后一个标签是静态的，我使用了选择的属性，对于动态标签[selected]="'tab' + $index"，$index是ngFor的索引

列表包含一项，所以选择的属性将是tab0，所以我将属性tab0定义为false

问题是虽然属性定义为false，但还是选择了2个选项卡

<p-tabView>
    <p-tabPanel header="{{category.categoryLabel}}" *ngFor="let category of categories; let $index=index" [selected]="'tab' + $index">
        <button type="button" class="btn btn-primary">{{'button.previous'|translate}}</button>
        <button type="button" class="btn btn-primary">{{'button.next'|translate}}</button>
        <button class="btn btn-default">{{'button.reset'|translate}}</button>
    </p-tabPanel>
    <p-tabPanel header="{{'tab.getProduct'|translate}}" [selected]="tab">
        <button type="button" class="btn btn-primary">{{'button.next'|translate}}</button>
        <button class="btn btn-default">{{'button.reset'|translate}}</button>
    </p-tabPanel>
</p-tabView>


 public tab0: boolean = false;
 public tab: boolean = false;

【问题讨论】：

标签： angular typescript primeng

【解决方案1】：

如果选项卡是动态的，则使用 activeIndex 而不是 selected。 PrimeNg 也推荐了同样的方法。

<button type="button" pButton icon="fa fa-chevron-up" (click)="openPrev()"></button>
<button type="button" pButton icon="fa fa-chevron-down" (click)="openNext()"></button>

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

在 ts 文件中，您可以在任何位置或任何方法内设置活动索引值。

export class TabViewDemo {

    index: number = 0;

    openNext() {
        this.index = (this.index === 2) ? 0 : this.index + 1;
    }

    openPrev() {
        this.index = (this.index === 0) ? 2 : this.index - 1;
    }

}

请参阅此链接Primeng上的程序控制

【讨论】：