Ich habe eine Mattenauswahl, bei der die Optionen alle in einem Array definierten Objekte sind. Ich versuche, den Wert als Standard auf eine der Optionen zu setzen, er wird jedoch beim Rendern der Seite ausgewählt gelassen.
Meine Typoskriptdatei enthält:
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
Meine HTML-Datei enthält:
<div>
<mat-select
[(value)]="selected2">
<mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>
Ich habe versucht , Einstellung selected2
und die value
in den mat-option
beiden auf das Objekt und es ist id, und haben versucht , beide mit [(value)]
und [(ngModel)]
in der mat-select
, aber keiner arbeiten.
Ich verwende Materialversion 2.0.0-beta.10
angular
typescript
angular-material2
William Moore
quelle
quelle
compareWith
. Es ist eleganter.compareWith
, siehe Badis Antwort hier stackoverflow.com/questions/47333171/…Antworten:
Verwenden Sie eine Bindung für den Wert in Ihrer Vorlage.
sollte sein
Und in Ihrem ausgewählten Wert
ngModel
anstelle von verwendenvalue
.sollte sein
Vollständiger Code:
Nebenbei bemerkt, ab Version 2.0.0-beta.12 akzeptiert die Materialauswahl jetzt ein
mat-form-field
Element als übergeordnetes Element, sodass es mit den anderen Materialeingabesteuerelementen übereinstimmt. Ersetzen Sie das Element nach dem Upgradediv
durch einmat-form-field
Element.quelle
mat-form-field
ist dies..."used to wrap several Angular Material components and apply common Text field styles"
also nicht dasselbe. Anders als das die OP und auch meine Antwort nicht erwähntFormControl
,FormGroup
oderFormControlName
.[compareWith]
Direktive ist das, was wir benutzt habenVerwenden Sie die
compareWith
Funktion A, um die Optionswerte mit den ausgewählten Werten zu vergleichen. siehe hier: https://material.angular.io/components/select/api#MatSelectFür ein Objekt mit folgender Struktur:
Definieren Sie Markup wie folgt:
Und definieren Sie die Vergleichsfunktion folgendermaßen:
quelle
Ich verwende Angular 5 und reaktive Formulare mit Mat-Select und konnte mit keiner der oben genannten Lösungen den Anfangswert anzeigen.
Ich musste [compareWith] hinzufügen, um mit den verschiedenen Typen umzugehen, die in der mat-select-Komponente verwendet werden. Intern scheint mat-select ein Array zu verwenden, um den ausgewählten Wert zu speichern. Dies ermöglicht wahrscheinlich, dass derselbe Code mit mehreren Auswahlen funktioniert, wenn dieser Modus aktiviert ist.
Angular Select Control Doc
Hier ist meine Lösung:
Form Builder zum Initialisieren des Formularsteuerelements:
Implementieren Sie dann die Funktion compareWith auf Ihrer Komponente:
Als nächstes erstellen und exportieren Sie die Funktion determinId (ich musste eine eigenständige Funktion erstellen, damit mat-select sie verwenden kann):
Fügen Sie abschließend das Attribut compareWith zu Ihrer Mattenauswahl hinzu:
quelle
Sie sollten es wie
[value]
immat-option
Folgenden binden ,LIVE DEMO
quelle
Sie können einfach Ihre eigene Vergleichsfunktion implementieren
[compareWith]="compareItems"
Siehe auch das Dokument . Der vollständige Code würde also so aussehen:
und in der Typescript-Datei:
quelle
i1
oderi2
nicht.Wie bereits in Angular 6 erwähnt, ist die Verwendung von ngModel in reaktiven Formen veraltet (und in Angular 7 entfernt). Daher habe ich die Vorlage und die Komponente wie folgt geändert.
Die Vorlage:
Die Hauptteile der Komponente (
onChanges
und andere Details werden weggelassen):Hinweis this.filter.setValue (this.selected) in
ngOnInit
oben.Es scheint in Angular 6 zu funktionieren.
quelle
[compareWith]
war großartigIch habe es genauso gemacht wie in diesen Beispielen. Es wurde versucht, den Wert der Mattenauswahl auf den Wert einer der Mattenoptionen zu setzen. Aber scheiterte.
Mein Fehler war, [(value)] = "someNumberVariable" für eine numerische Typvariable auszuführen, während die in mat-options Zeichenfolgen waren. Selbst wenn sie in der Vorlage gleich aussehen würden, würde diese Option nicht ausgewählt.
Nachdem ich die someNumberVariable zu einer Zeichenfolge analysiert hatte, war alles in Ordnung.
Es scheint also, dass die Werte für mat-select und mat-option nicht nur dieselbe Zahl sein müssen (wenn Sie Zahlen präsentieren), sondern auch vom Typ string sein müssen.
quelle
Die Lösung für mich war:
TS:
Verwenden des Objekts: {id: number, detalle: string}
quelle
Versuche dies!
quelle
Meine Lösung ist etwas knifflig und einfacher.
Ich habe gerade den Platzhalter benutzt . Die Standardfarbe des Materialplatzhalters ist
light gray
. Damit es so aussieht, als wäre die Option ausgewählt, habe ich das CSS wie folgt bearbeitet:quelle
Die Bindung oder der Standardwert Einstellung funktioniert nur , wenn der Wert Attribut auf MatSelect vergleichbar ist Wert Attribut binded MatOption . Wenn Sie binden
caption
Ihre Artikel an Wert Attribut mat-Option Element Sie das Standardelement auf einstellen muß vlies wählen zucaption
Ihrem Artikel zu. Wenn SieId
Ihren Artikel an mat-option binden, müssen Sie auchid
an mat-select binden , nicht an einen ganzen Artikel, eine Beschriftung oder ein anderes, sondern nur an dasselbe Feld.Aber du musst es mit Bindung tun []
quelle
Ich habe die obigen Schritte sehr sorgfältig befolgt und konnte den Anfangswert immer noch nicht auswählen.
Der Grund war, dass meine Backend-API eine Zahl zurückgab, obwohl mein gebundener Wert im Typoskript als Zeichenfolge definiert war.
Durch die lose Eingabe von Javascript wurde der Typ einfach zur Laufzeit (ohne Fehler) geändert, wodurch die Auswahl des Anfangswertes verhindert wurde.
Komponente
Vorlage
Die Lösung bestand darin, die API zu aktualisieren, um einen Zeichenfolgenwert zurückzugeben.
quelle
Eine sehr einfache Möglichkeit, dies zu erreichen, ist die Verwendung von a
formControl
mit einem Standardwert, beispielsweise innerhalb von aFormGroup
(optional). Dies ist ein Beispiel für die Verwendung eines Einheitenwählers für einen Bereichseingang:ts
html
quelle
Ein Vergleich zwischen einer Zahl und einer Zeichenfolge ist in der Regel falsch. Wenn Sie also den ausgewählten Wert in eine Zeichenfolge in ngOnInit umwandeln, funktioniert dies.
Ich hatte das gleiche Problem, ich füllte die Mattenauswahl mit einer Aufzählung mit
und ich hatte den Aufzählungswert, den ich auswählen wollte ...
Ich verbrachte einige Stunden damit, herauszufinden, warum es nicht funktionierte. Und ich habe es getan, nachdem ich alle Variablen gerendert hatte, die in der Mattenauswahl, der Schlüsselsammlung und der ausgewählten ... verwendet wurden, wenn Sie ["0", "1", "2"] haben und 1 auswählen möchten ( das ist eine Zahl) 1 == "1" ist falsch und deshalb wird nichts ausgewählt.
Die Lösung besteht also darin, den ausgewählten Wert in eine Zeichenfolge in ngOnInit umzuwandeln, und es funktioniert.
quelle
Ich war das.
Normalerweise können Sie tun
[value]="option"
, es sei denn, Sie erhalten Ihre Optionen aus einer Datenbank? Ich denke, entweder führt die Verzögerung beim Abrufen der Daten dazu, dass sie nicht funktionieren, oder die erhaltenen Objekte unterscheiden sich in gewisser Weise, obwohl sie gleich sind. Seltsamerweise ist es höchstwahrscheinlich das spätere, da ich es auch versucht habe[value]="option === selected ? selected : option"
und es nicht funktioniert hat.quelle
TS
HTML
quelle
quelle