Matériau angulaire: sélectionne pas par défaut

J'ai un tapis-sélectionnez l'endroit où les options sont tous les objets définis dans un tableau. Je suis en train de mettre la valeur par défaut pour l'une des options, mais il est en train d'être activée lorsque la page est affichée.

Mon tapuscrit fichier 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é de réglage selected2 et la value dans mat-option à la fois l'objet et l'id, et ont essayé d'utiliser à la fois [(value)] et [(ngModel)] dans le mat-selectmais aucun travail.

Je suis à l'aide du matériel de la version 2.0.0-bêta.10

Grâce

source d'informationauteur William Moore

Utiliser une liaison pour la valeur de votre modèle.

value="{{ option.id }}"

devrait être

[value]="option.id"

Et dans votre sélection de valeur d'utilisation ngModel au lieu de value.

<mat-select [(value)]="selected2">

devrait ê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 la version 2.0.0-bêta.12 la sélectionnez accepte désormais mat-form-field de l'élément de l'élément parent, de sorte qu'il est compatible avec les autres documents de contrôles de saisie. 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>

Vous devrait être obligatoire comme [value] dans le mat-option comme ci-dessous,

<mat-select placeholder="Panel color" [(value)]="selected2">
  <mat-option *ngFor="let option of options2" [value]="option.id">
    {{ option.name }}
  </mat-option>
</mat-select>

DÉMONSTRATION EN DIRECT

Utilisation compareWithUne 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;
}

6

Je suis en utilisant Angulaire 5 et formes réactives avec mat-sélectionnez et ne pouvait pas obtenir l'une 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. Il est probable que le même code pour travailler avec plusieurs sélections si ce mode est activé.

Angulaire Sélectionnez Contrôle De La Doc

Voici ma solution:

Constructeur de formulaire pour initialiser le formulaire de contrôle:
```
this.formGroup = this.fb.group({
    country: new FormControl([ this.myRecord.country.id ] ),
    ...
});
```
De mettre en œuvre l'compareWith fonction de votre composant:
```
compareIds(id1: any, id2: any): boolean {
    const a1 = determineId(id1);
    const a2 = determineId(id2);
    return a1 === a2;
}
```
Prochaine créer et exporter le determineId fonction (j'ai dû créer une fonction autonome de sorte mat-sélectionner pourrait l'utiliser):
```
export function determineId(id: any): string {
    if (id.constructor.name === 'array' && id.length > 0) {
       return '' + id[0];
    }
    return '' + id;
}
```
Enfin, ajouter les compareWith attribut à votre mat-sélectionnez:
```
<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">
                        {{ contry.name }}
    </mat-option>
</mat-select>
</mat-form-field>
```

Vous devez vous connecter pour publier un commentaire.