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.
Tippfehler beim posten hier...ist richtig im code
Siehe @Andrey Kolybelnikov Antwort unten. Es löst das problem.
InformationsquelleAutor Maiur Laximidas | 2017-10-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
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:Und in der .ts-Datei verwende ich die Funktion aus der Win-doc true zurück, wenn zwei User-Objekte haben die gleiche id:
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.InformationsquelleAutor reddree
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
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:
InformationsquelleAutor Shailesh Nayak K