Matériau angulaire: sélection du tapis sans sélection du défaut

Question

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 de la value en mat-option à la fois l'objet et l'id, et ont essayé d'utiliser les deux [(value)] et [(ngModel)] dans la mat-select, mais aucun travail.

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

Answer 1

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é de la version 2.0.0-bêta.12 le matériel sélectionnez accepte maintenant l' 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 l' 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>

Answer 2

Utilisez compareWith , une fonction permettant de comparer les valeurs d’option aux 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éfinissez le balisage 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 définissez la fonction de comparaison comme ceci:

 compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}
 

Answer 3

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:

Générateur de formulaire pour initialiser le contrôle de formulaire:

this.formGroup = this.fb.group({
    country: new FormControl([ this.myRecord.country.id ] ),
    ...
});

Puis mettre en œuvre le 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électionner:

<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>

Answer 4

Vous devriez le lier en tant que [value] dans les 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>
 

DEMO LIVE

Answer 5

Comme déjà mentionné dans Angular 6, l'utilisation de ngModel sous des formes réactives est déconseillée (et supprimée dans Angular 7). J'ai donc modifié le modèle et le composant comme suit.

Le gabarit:

 <mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let v of values" [value]="v">{{v.label}}</mat-option>
    </mat-select>
</mat-form-field>
 

Les principales parties du composant ( onChanges et les autres détails sont omis):

 interface SelectItem {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input
    selected: SelectItem[] = [];

    @Input()
    values: SelectItem[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(v1: SelectItem, v2: SelectItem): boolean {
        return compareFn(v1, v2);
    }
}

function compareFn(v1: SelectItem, v2: SelectItem): boolean {
    return v1 && v2 ? v1.value === v2.value : v1 === v2;
}
 

Notez this.filter.setValue (this.selected) dans ngOnInit ci-dessus.

Cela semble fonctionner dans Angular 6.