Angular2/4 tapis en sélectionner plusieurs ngModel

J'ai un tapis-sélectionnez dropdownlist avec plusieurs activé et je suis en utilisant NgModel utilisateur pour stocker les valeurs sélectionnées.

Problème, c'est quand j'ai accédez à une autre page et de revenir à l'utilisateur les valeurs sélectionnées ne sont pas dans le tapis-select..je sais que le ngModel a ces valeurs...il me manque quelque chose...

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?

  • faute de frappe dans [(ngModel)]=custonerDetails?
  • Faute de frappe lors de la publication sur ici...est correct dans le code
  • Voir @Andrey Kolybelnikov réponse ci-dessous. Il résout le problème.
InformationsquelleAutor Maiur Laximidas | 2017-10-10
  1. 9

    Selon un cas d'utilisation de l'initialisation de certaines options par défaut sélectionnée peut ne pas fonctionner simplement en se liant à la ngModel, car les objets dans les options et dans le sous-ensemble sélectionné à partir de l'état précédent ont des identités différentes.
    Grâce à l'appui de compareWith il est possible de les définir en tant que sélectionné.

    Ont un look à la officiel Angulaire docs ici.

    Dans Material2 démo de l'application qu'ils ont un exemple de fonction avec deux implémentations. C'est ici.

    Dans mon composant, j'ai une collection d'objets Utilisateur [les gens] pour les options de mat sélectionner. Le composant reçoit une collection de certains des objets Utilisateur [utilisateurs] comme Entrée à partir de l'état précédent. Juste assez, les objets dans [les gens] et des objets [utilisateurs] ont des identités différentes et le sous-ensemble dans les multiples sélectionnez ne pas initialiser avec des cases sélectionnées par défaut.

    Donc, le magique compareWith littéralement compare les objets par certaines valeurs et renvoie true ou false, et les cases à cocher sur le sous-ensemble de [personnes] obtenir le statut de certains. Dans mon code j'ai décidé d'aller avec [(ngModel]) de liaison:

    <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 .ts fichier j'utilise la fonction à partir de l'angle de doc pour renvoyer la valeur true si les deux objets ont le même id:

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

    Si vous avez un semblable cas d'utilisation, il pourrait fonctionner out-of-the-box.

    Sur le quel est-sous-le-capot note, compareWith m'a rendu curieux. J'ai trouvé qu'il est basé sur une fonction dans Angular2 appelé looseIdentical (avoir un coup d'oeil ici), qui à son tour dérive de l'identique dans Dart.js bibliothèque de la part de Google. Il peut être trouvé ici.

    • presque déchets 2 heures après j'ai trouver cette réponse, ça fonctionne très agréable. merci @reddree. 1 comme de moi.
    InformationsquelleAutor RedDree
  2. 0

    Veuillez vérifier [(ngModel)]="custonerDetails"
    Je pense qu'il y a quelques fautes d'orthographe et vous pouvez également l'utiliser comme
    [(value)]="custonerDetails".

    InformationsquelleAutor manish sharma
  3. -2

    Si vous êtes sûr que ngModel a de la valeur. La question pourrait être la [valeur] propriété du le mat-option est en train de perdre cette sélection.

    Essayez ceci: 

    [ngValue]="customer" instead of [value]= "customer"
    InformationsquelleAutor Shailesh Nayak K