启动选择的动态p-tabPanel

Question

我使用了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;

Answer 1

如果选项卡是动态的，请使用activeIndex而不是选择。 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

中的程序控制