Matériau angulaire: mat-select ne sélectionne pas la valeur par défaut
j'ai un tapis-sélectionnez l'endroit où les options sont tous les objets définis dans un tableau. J'essaie de définir la valeur par défaut à l'une des options, mais elle est laissée sélectionnée lorsque la page est rendue.
mon fichier dactylographié contient:
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
mon fichier HTML contient:
<div>
<mat-select
[(value)]="selected2">
<mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>
j'ai essayé la configuration de selected2 et valuemat-option à la fois l'objet et l'id, et ont essayé d'utiliser à la fois [(value)] et [(ngModel)] dans le mat-select, mais aucun n'est travailler.
j'utilise material version 2.0.0-beta.10
Merci
5 réponses
Utiliser une liaison pour la valeur de votre modèle.
value="{{ option.id }}"
doit être
[value]="option.id"
Et dans votre sélection de valeur d'utilisation ngModel au lieu de value.
<mat-select [(value)]="selected2">
doit être
<mat-select [(ngModel)]="selected2">
code complet:
<div>
<mat-select [(ngModel)]="selected2">
<mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
</mat-select>
</div>
Sur une note de côté, comme de l' la version 2.0.0-bêta.12sélectionnez accepte maintenant mat-form-field élément comme l'élément parent de sorte qu'il est compatible avec autres contrôles d'entrée des matières. Remplacer le div élément avec mat-form-field élément après la mise à niveau.
<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>
Utiliser compareWith, Une fonction pour comparer les valeurs d'option avec les valeurs sélectionnées. voir ici: https://material.angular.io/components/select/api#MatSelect
Pour un objet de la structure suivante:
listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]
Définir le texte comme ceci:
<mat-form-field>
<mat-select
[compareWith]="compareObjects"
[(ngModel)]="obj">
<mat-option *ngFor="let obj of listOfObjs" [value]="obj">
{{ obj.name }}
</mat-option>
</mat-select>
</mat-form-field>
Et de définir la fonction de comparaison comme ceci:
compareObjects(o1: any, o2: any): boolean {
return o1.name === o2.name && o1.id === o2.id;
}
j'utilise des formes angulaires 5 et réactives avec mat-select et je n'ai pu obtenir aucune des solutions ci-dessus pour afficher la valeur initiale.
j'ai dû ajouter [compareWith] pour traiter les différents types utilisés dans les tapis-sélectionner le composant. En interne, il apparaît mat-sélectionnez utilise un tableau pour contenir la valeur sélectionnée. Cela permettra probablement au même code de fonctionner avec plusieurs sélections si ce mode est activé.
Contrôle De Sélection Angulaire Doc
Voici ma solution:
Constructeur de Formulaire pour initialiser le contrôle de formulaire:
this.formGroup = this.fb.group({
country: new FormControl([ this.myRecord.country.id ] ),
...
});
alors implémentez la fonction compareWith sur votre component:
compareIds(id1: any, id2: any): boolean {
const a1 = determineId(id1);
const a2 = determineId(id2);
return a1 === a2;
}
ensuite créer et exporter la fonction determineId (j'ai dû créer une fonction autonome pour que mat-select puisse l'utiliser):
export function determineId(id: any): string {
if (id.constructor.name === 'array' && id.length > 0) {
return '' + id[0];
}
return '' + id;
}
enfin, ajoutez l'attribut compareWith à votre sélection 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>
Essayez ceci!
this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList