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

【问题标题】：How can i change the order of p-tabPanel dynamically如何动态更改 p-tabPanel 的顺序
【发布时间】：2020-11-24 07:51:55
【问题描述】：

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

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;

【问题讨论】：

标签： angular primeng tabview

【解决方案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>

最后，对 tabPanel 进行排序：

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

【讨论】：