web-dev-qa-db-fra.com

Mat/select angulaire 2 mat-select programme ouvrir/fermer

Est-ce que quelqu'un sait comment ouvrir ou fermer par programmation un mat-select? En ce qui concerne l'api, il existe des méthodes d'ouverture et de fermeture, mais vous ne savez pas comment appeler ces méthodes à partir d'un composant. Aucun exemple ne montre cela sur site. 

Merci

angularangular-material2md-select
6
Bhavesh

Pour accéder à ces propriétés, vous devez identifier l'élément DOM et y accéder avec une variable ViewChild:

composant.html

  <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>

composant.ts

import {Component, ViewChild} from '@angular/core';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  @ViewChild('mySelect') mySelect;
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  click() {
    this.mySelect.open();
  }
}

Voir un stackblitz de travail ici.

17
Z. Bagley

Une autre approche, afin de ne pas coupler si étroitement le composant matériel à votre code TypeScript, serait de gérer tout cela du côté HTML. 

<mat-form-field>
  <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br/>
<button (click)="mySelect.toggle()">click</button>

J'ai utilisé toggle() sur la réponse "sélectionnée" pour ouvrir ou fermer le panneau, bien que vous puissiez substituer des appels open() ou close() en fonction de vos besoins.

L'élément clé semble être cette variable de modèle (#mySelect) que j'ai apprise grâce à la réponse fournie par @zbagley. Je n'arrêtais pas de bricoler pour que cela fonctionne sans la liaison étroite d'un @ViewChild.

A bientôt, Dan

2
djmarquette