web-dev-qa-db-fra.com

Angular2/4 mat-select multiple ngModel

J'ai une liste déroulante mat-select avec plusieurs activés et j'utilise NgModel pour stocker les valeurs sélectionnées par l'utilisateur.

Le problème est que lorsque je navigue vers une autre page et que je reviens, les valeurs sélectionnées par l'utilisateur ne sont pas dans la sélection de tapis. Je sais que le modèle ngModel a ces valeurs ... quelque chose me manque ...

HTML

<mat-form-field>
 <mat-select placeholder="Customers" name="customerDetails" ngDefaultControl       
 formControlName="customerDetails" [(ngModel)]="custonerDetails" 
 [formControl]="customerDetailsCtrl" multiple   
 (ngModelChange)="onCustomerValueChanges(customer)" >

  <mat-option *ngFor="let customer of customerDetailsResult"
  [value]="customer">{{customer.CustomerNo}}- 
                     {{customer.CustomerDescription}}
   </mat-option>
 </mat-select>
</mat-form-field>

Des idées?

angularangular-materialangular2-formsangular2-ngmodel
4
Maiur Laximidas

Selon le cas d'utilisation, l'initialisation de certaines options par défaut sélectionnées risque de ne pas fonctionner en liant simplement la variable ngModel, car les objets des options et du sous-ensemble sélectionné de l'état précédent ont des identités différentes . support pour compareWith il est possible de les définir comme sélectionnés.

Jetez un coup d'œil à l'offical Angular docs here .

Dans Material2, l'application de démonstration contient un exemple de la fonction avec deux implémentations. C'est ici .

Dans mon composant, j'ai une collection d'objets Utilisateur [personnes] pour les options de sélection de tapis. Le composant reçoit une collection d'objets utilisateur sélectionnés [utilisateurs] en tant qu'entrée de l'état précédent. Les objets dans [personnes] et les objets dans [utilisateurs] ont des identités différentes et le sous-ensemble de la sélection multiple ne s'initialise pas avec les cases à cocher sélectionnées par défaut.

Ainsi, la compareWith magique compare littéralement les objets à certaines valeurs et renvoie true ou false, et les cases à cocher du sous-ensemble de [personnes] obtiennent le statut de sélectionné. Dans mon code, j'ai décidé d'utiliser la liaison [(ngModel]):

<mat-form-field>
    <mat-select [compareWith]="compareFn" name="users" [(ngModel)]="users" multiple>
        <mat-option *ngFor="let person of people" [value]="person">
           {{ person.username }}
        </mat-option>
   </mat-select>
</mat-form-field>

Et dans le fichier .ts, j'utilise la fonction de la doc Angular doc pour renvoyer la valeur true si deux objets User ont le même identifiant:

compareFn(user1: User, user2: User) {
    return user1 && user2 ? user1.id === user2.id : user1 === user2;
}

Si vous avez un cas d'utilisation similaire, cela pourrait fonctionner immédiatement.

Sur la note de ce qui est sous le capot, compareWith m'a rendu curieux. J'ai découvert qu'elle est basée sur une fonction de looseIdentical (regardez ici ) dans Angular2, qui dérive à son tour de l'identique dans la bibliothèque Dart.js de Google. On peut le trouver ici .

7
reddree

Veuillez cocher [(ngModel)]="custonerDetails" Je pense qu’il ya une faute d’orthographe et que vous pouvez également l’utiliser comme [(value)]="custonerDetails".

0
manish sharma