Как я могу динамически изменить порядок p-tabPanel - PullRequest
Новая
       48

Как я могу динамически изменить порядок p-tabPanel

0 голосов
/ 04 августа 2020

Я использую 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;

1 Ответ

2 голосов
/ 04 августа 2020

Вы можете прослушивать изменения раскрывающегося списка

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 order:

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

...