Как настроить панель md-select на открытие по умолчанию

Question

Я использую angular4 с Redux и угловой материал для дизайна моей веб-страницы. Я пытаюсь настроить панель md-select на открытие. пример сценария: нажатие кнопки отправляет действие, чтобы открыть панель выбора, чтобы открыть все параметры.

Я использую избыточные действия для управления состоянием моих компонентов. Так что в основном мне нужно запустить действие, чтобы установить выбор для открытия.

Какие-либо предложения?

Answer 1

Используя пример Material2 в качестве отправной точки для этого ответа. Вот как вы можете это сделать:

Дайте идентификатор вашей панели, например mySelect

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

... затем измените класс компонента:

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

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
})
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;

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

---

Plunker ссылка здесь: PLUNKER DEMO

Answer 2

В этом примере показано, как подписаться на состояние, чтобы раскрывающийся список соответствовал текущему состоянию. Так что меняй initialState чтобы быть правдой, если вы хотите, чтобы он изначально открыт.

Есть кнопка, которая отправляет действие состояния переключения, чтобы открыть раскрывающийся список.

Это можно изменить, чтобы переключать или создавать отдельные кнопки открытия / закрытия или все, что вам нужно.

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

мой-component.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 })
  }

}

Answer 3

Проверьте ссылку: https://www.npmjs.com/package/angular2-select

это может помочь вам