Comment configurer le panneau md-select pour qu'il soit ouvert par défaut

Vérifier le lien: https://www.npmjs.com/package/angular2-select#methods

Cela peut vous aider.

Cet exemple vous montre comment vous abonner à l'état afin que la liste déroulante soit quel que soit l'état actuel. Alors changez initialState pour être vrai si vous voulez qu'il s'ouvre initialement.

Il existe un bouton qui distribue l'action de basculement d'état pour ouvrir la liste déroulante.

Cela peut être modifié pour basculer ou créer des boutons d'ouverture / fermeture séparés ou tout ce dont vous avez besoin.

state.ts

export interface AppState {
  isDropDownOpen: boolean
}

const initialState: AppState = {
  isDropDownOpen: false;
};

export function appReducer(
  state: AppState = initialState,
  action: any
): AppState {
  switch (action.type) {
    case 'toggleSelect': {
      state.isDropDownOpen = action.payload
      return state;
    }
    default: {
      return state;
    }
  }
}

mon-composant.ts

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

@Component({
  selector: 'my-component',
  template: `
    <md-select placeholder="Favorite food" #mySelect>
      <md-option *ngFor="let food of foods" [value]="food.value">
        {{ food.viewValue }}
      </md-option>
    </md-select>
    <button (click)="openSelect()"> Open Select </button>
`,
})
export class SelectOverviewExample implements AfterViewInit {
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  @ViewChild('mySelect') mySelect: MdSelect;

  controller( private store: Store<AppState>){
    store.select(state => state.isDropDownOpen).subscribe(isDropDownOpen => {
      if(isDropDownOpen){
        this.mySelect.open()
      } else {
        this.mySelect.close()
      }
    })
  }

  openSelect(){
    this.store.dispatch({ type: toggleSelect, payload: true })
  }

}