J'ai une chute de sélection de matériel qui ressemble à ceci:

<chart-container class="selection-chart" [config]="chartConfig">
        <mat-form-field>
               <mat-label>Selections *</mat-label>
               <mat-select [(ngModel)]="selectedOptions" name="optionSelection" multiple (selectionChange)="onConfigurationChanged()">
                    <mat-option [disabled]="selectedOptions.length > 2 && !selectedOptions.includes(option)" *ngFor="let option of optionList" [value]="option">{{option.name}}</mat-option>
               </mat-select>
        </mat-form-field>
<chart-container>

C'est assez simple, fondamentalement, l'utilisateur peut sélectionner jusqu'à 3 options dans la liste des options de plus de 10+.

Lorsque l'utilisateur sélectionne une option, il est ajouté à selectedOptions. Cependant, j'ai un problème avec la commande dans selectedOptions.

Si l'utilisateur sélectionne le premier élément de la liste comme sa première sélection, aucun problème n'est rencontré. Le tableau simplifié ressemble à ceci: [1].

Si l'utilisateur ajoute ensuite le 5ème élément de la liste, le tableau ressemble à ceci: [1,5].

Toutefois, si elles font ensuite leur troisième sélection comme le 2ème article de la liste, l'ordre du tableau devient: [1, 2, 5].

C'est-à-dire que le deuxième élément est ajouté au milieu de la matrice par opposition à ce que je préférerais:

[1, 5, 2] - C'est la commande que les options ont été sélectionnées.

Y a-t-il une façon de vous assurer de cela?

ÉDITER:

onConfigurationChanged ressemble simplement à ceci:

let dataFetchObservables: Observable<OverviewData[]>[] = [];
if (this.selectedOptions.length > 0) {
            this.updateChartTitles();
        }
0
nimgwfc 4 mai 2021 à 11:53

1 réponse

Meilleure réponse

Vous pouvez envelopper vos objets avec une propriété de date, quelque chose comme (ne l'a pas testé):

Déclarez l'interface wrapper

export interface Documented<T> {
  Item: T;  
  Time: Date;
}

Mapper vos objets

// optionList:YourOptionsType[];
wrappedOptionList:Documented<YourOptionsType>[];
wrappedSelectedOptions:Documented<YourOptionsType>[];

this.YourService.getOptions().subscribe((options:YourOptionsType[])=>{
    this.wrappedOptionList = options.map(op=> { return { Item:op, Time:null } as Documented<YourOptionsType> })
})

Gérer l'événement lorsque l'option a changé

optionChanged(opt,event){
  if(event.isUserInput) {
    //console.log(event.source.value, event.source.selected);
    opt.Time = event.source.selected ? new Date() : null;
  }
}

Utilisez-le dans votre modèle. Notez que j'ai ajouté le (onSelectionChange)="optionChanged(wrappedOption,$event)" à mat-option.

<mat-select [(ngModel)]="wrappedSelectedOptions" name="optionSelection" multiple (selectionChange)="onConfigurationChanged()">
  <mat-option [disabled]="wrappedSelectedOptions.length > 2 && !wrappedSelectedOptions.includes(wrappedOption)" *ngFor="let wrappedOption of wrappedOptionList" [value]="wrappedOption" (onSelectionChange)="optionChanged(wrappedOption,$event)" >{{wrappedOption?.Item?.name}}</mat-option>
</mat-select>

Puis dans votre méthode onConfigurationChanged

let SortedSelections = this.wrappedSelectedOptions.sort((a: Documented<YourOptionsType>, b: Documented<YourOptionsType>) => { 
  return a.Time.getTime() - b.Time.getTime();
});
2
ShayD 4 mai 2021 à 12:04