Angular2/4-Matte-wählen Sie mehrere ngModel

Habe ich eine Matte-wählen Sie " dropdownlist mit mehreren aktiviert und bin mit NgModel zum speichern der Benutzer-ausgewählten Werte.

Problem ist, wenn ich navigieren Sie zu einer anderen Seite und kommen zurück, die vom Benutzer vorgewählten Werte sind nicht in der Matte-wählen Sie..ich weiß das ngModel hat diese Werte...bin ich etwas fehlt...

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>

Irgendwelche Ideen?

Tippfehler in [(ngModel)]=custonerDetails?
Tippfehler beim posten hier...ist richtig im code
Siehe @Andrey Kolybelnikov Antwort unten. Es löst das problem.

InformationsquelleAutor Maiur Laximidas | 2017-10-10

  1. 8

    Je nach Anwendungsfall Initialisierung einige Standard-Optionen ausgewählt werden möglicherweise nicht arbeiten, indem Sie einfach die Bindung an die ngModel, weil Objekte in den Optionen und in der ausgewählten Teilmenge aus dem vorherigen Zustand verschiedene Identitäten.
    Dank der Unterstützung für compareWith es ist auch möglich, Sie als ausgewählt.

    Haben Sie einen Blick auf das offizielle Angular-docs hier.

    In Material2 demo-app haben Sie ein Beispiel für die Funktion mit zwei Implementierungen. Es ist hier.

    In meine Komponente habe ich eine Sammlung von Benutzer-Objekten [die Menschen] für die Optionen von mat wählen. Die Komponente erhält eine Sammlung von ausgewählten Benutzerobjekte [Benutzer] als Input vom vorherigen Zustand. Fair genug, Objekte in der [Menschen] und Objekte [Benutzer] haben unterschiedliche Identitäten und der Teilmenge in der mehrfach-Auswahl-nicht initialisieren mit ausgewählten Checkboxen standardmäßig aktiviert.

    So, die Magische compareWith nur wörtlich vergleicht Objekte von einigen gegebenen Werten und gibt true oder false zurück, und die Kontrollkästchen auf der Teilmenge von [Menschen] der status gewählt werden. In meinem code habe ich beschlossen zu gehen mit [(ngModel]) - Bindung:

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

    Und in der .ts-Datei verwende ich die Funktion aus der Win-doc true zurück, wenn zwei User-Objekte haben die gleiche id:

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

    Wenn Sie einen ähnlichen Anwendungsfall, es könnte funktionieren out-of-the-box.

    Auf dem was-unter-der-Haube beachten compareWith mich neugierig gemacht. Ich fand heraus, dass es basiert auf einer Funktion in Angular2 genannt looseIdentical (haben Sie einen Blick hier), die wiederum leitet sich von der identisch in Dart.js Bibliothek von Google. Es kann festgestellt werden hier.

    fast Abfälle 2 Stunden nachdem ich diese Antwort es funktioniert sehr schön. danke @reddree. 1 gefällt mir.

    InformationsquelleAutor reddree

  2. 0

    Bitte überprüfen Sie [(ngModel)]="custonerDetails"
    Ich denke, es gibt einige Rechtschreibfehler und Sie können es auch verwenden, wie
    [(value)]="custonerDetails".

    InformationsquelleAutor manish sharma

  3. -2

    Wenn du sicher bist, dass ngModel hat der Wert in es. Das Problem könnte sein, dass der [Wert] - Eigenschaft der Matte-option ist verlieren Sie diese Auswahl.

    Versuchen Sie dies: 

    [ngValue]="customer" instead of [value]= "customer"

    InformationsquelleAutor Shailesh Nayak K

Schreibe einen Kommentar