如何动态更改 p-tabPanel 的顺序

Question

我正在使用 Primeng tabView，我正在寻找一种方法来动态更改 tabPanel 的顺序，例如我放了一个带有两个选项的下拉列表 ['One', 'Two'], 如果我 select 选项一 tabPabels 的顺序将是教父 I, 教父 II, 如果我 select 选项二的顺序将是教父二世，教父一世

HTML :

Condition :
<p-dropdown [options]="choices" [(ngModel)]="choice"
     placeholder="Sélectionner" optionLabel="name" >
</p-dropdown>



<p-tabView>
    <p-tabPanel header="Godfather I" leftIcon="pi pi-calendar">
        
    </p-tabPanel>

    <p-tabPanel header="Godfather II" leftIcon="pi pi-inbox">
        
    </p-tabPanel>

</p-tabView>

TS :

choices : String[] = ['One', 'Two'];
choice : String;

Answer 1

您可以收听下拉列表的变化

html

<p-dropdown [options]="choices" [(ngModel)]="choice" placeholder="Sélectionner" 
     (onChange)="sortTabs($event.value)">
</p-dropdown>

然后使用ngFor指令：

html

<p-tabView>
    <ng-container *ngFor="let item of tabs">
        <p-tabPanel *ngIf="item === 'one'" header="Godfather I" leftIcon="pi pi-calendar">
            content 1
        </p-tabPanel>
        <p-tabPanel *ngIf="item === 'two'" header="Godfather II" leftIcon="pi pi-inbox">
            content 2
        </p-tabPanel>
    </ng-container>
</p-tabView>

最后，对选项卡面板顺序进行排序：

ts

choices: any[] = [
  {
    label: "One",
    value: "one"
  },
  { 
    label: "Two",
    value: "two"
  }
];

choice: String = 'one';

tabs = ['one', 'two'];

sortTabs(value) {
  if (value === 'one') {
    this.tabs.sort();
  } else {
    this.tabs.reverse();
  }
}

Stackblitz Example

如何动态更改 p-tabPanel 的顺序

How can i change the order of p-tabPanel dynamically

angular

primeng

tabview