111 votes

Matériau angulaire: sélection du tapis sans sélection du 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 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

146voto

Igor Points 7994

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>

95voto

Badis Merabet Points 2220

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

25voto

Heather92065 Points 2662

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>

16voto

Aravind Points 21523

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

6voto

user194715 Points 656

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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X