angular - Kontrollera elementet i columnoptions för p-multiSelect PrimeNG, lägg till den aktuella kolumnen i slutet av arrayen

Finns det någon lösning för att få kryssruta/avmarkera-elementet i PrimeNG p-multiselect att behålla de bundna arrayens kolumner i ordning?

(faktiskt, när vi avmarkerar ett element försvinner det från arrayens kolumner, men när vi markerar det igen läggs kolumnen till i slutet av arrayen och inte på det ursprungliga indexet)

Svar #1

Vad du kan göra är att lägga till en position-egenskap i dina options. Sedan är allt du behöver göra att lägga till onChange-händelsen och ordna om selectedOptions med position-egenskapen.

HTML

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars1" [panelStyle]="{minWidth:'12em'}" (onChange)="reorderValues($event)"></p-multiSelect>

TS

    // add position property
    this.cars.forEach(function (car, i) {
      car.value = { position: i, value: car.value };
    });

och

  reorderValues(event) {
    this.selectedCars1.sort(function (a: any, b: any) { return (a.position > b.position) ? 1 : ((b.position > a.position) ? -1 : 0); });
  }

Redigera

Om du vill göra detta multivalfält obligatoriskt, lägg till validering på det.

  validateForm() {
    this.showMultiselectRequiredMessage = (this.selectedCars1.length === 0) ? true : false;
  }

Se StackBlitz