Ik heb een mat-select waar de opties allemaal objecten zijn die gedefinieerd zijn in een array. Ik probeer de standaardwaarde in te stellen op een van de opties, maar deze blijft geselecteerd wanneer de pagina rendert.
Mijn typescript bestand bevat:
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
Mijn HTML bestand bevat:
<div>
<mat-select
[(value)]="selected2">
<mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>
Ik heb geprobeerd selected2
en de waarde
in mat-option
in te stellen op zowel het object als het id ervan, en ik heb geprobeerd zowel [(waarde)]
als [(ngModel)]
in de mat-select
te gebruiken, maar geen van beide werkt.
Ik gebruik materiaal versie 2.0.0-beta.10
Gebruik een binding voor de waarde in uw sjabloon.
value="{{ option.id }}"
zou moeten zijn
[value]="option.id"
En in je geselecteerde waarde gebruik je ngModel
in plaats van value
.
<mat-select [(value)]="selected2">
zou moeten zijn
<mat-select [(ngModel)]="selected2">
Volledige code:
<div>
<mat-select [(ngModel)]="selected2">
<mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
</mat-select>
</div>
Vanaf versie 2.0.0-beta.12 accepteert het material select nu een mat-form-field
element als parent element zodat het consistent is met de andere material input controls. Vervang het div
element door het mat-form-field
element na je upgrade.
<mat-form-field>
<mat-select [(ngModel)]="selected2">
<mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
</mat-select>
</mat-form-field>
Ik'm gebruik Angular 5 en reactieve formulieren met mat-select en kon't krijgen een van de bovenstaande oplossingen om de initiële waarde weer te geven.
Ik moest [compareWith] toevoegen om om te gaan met de verschillende types die worden gebruikt binnen de mat-select component. Intern lijkt het erop dat mat-select een array gebruikt om de geselecteerde waarde in op te slaan. Dit laat waarschijnlijk toe dat dezelfde code werkt met meerdere selecties als die modus is ingeschakeld.
Hier's mijn oplossing:
Form Builder om de form control te initialiseren:
this.formGroup = this.fb.group({
country: new FormControl([ this.myRecord.country.id ] ),
...
});
Implementeer dan de compareWith functie op je component:
compareIds(id1: any, id2: any): boolean {
const a1 = determineId(id1);
const a2 = determineId(id2);
return a1 === a2;
}
Maak en exporteer vervolgens de determineId functie (ik moest een standalone functie maken zodat mat-select deze kon gebruiken):
export function determineId(id: any): string {
if (id.constructor.name === 'array' && id.length > 0) {
return '' + id[0];
}
return '' + id;
}
Voeg tenslotte het compareWith attribuut toe aan je mat-select:
<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country"
[compareWith]="compareIds">
<mat-option>None</mat-option>
<mat-option *ngFor="let country of countries" [value]="country.id">
{{ country.name }}
</mat-option>
</mat-select>
</mat-form-field>
Je moet het binden als [waarde]
in de mat-optie
zoals hieronder,
<mat-select placeholder="Panel color" [(value)]="selected2">
<mat-option *ngFor="let option of options2" [value]="option.id">
{{ option.name }}
</mat-option>
</mat-select>