如何设置md-select面板默认打开

How to set md-select panel to be open by default

我正在使用带有 Redux 的 angular4 和 angular material 来设计我的网页。 我正在尝试将 md-select 面板设置为打开。 示例场景:单击按钮调度操作以打开 select 面板打开以显示所有选项。

我正在使用 redux 操作来操纵我的组件状态。所以基本上我需要触发一个动作来设置 select 打开。

有什么建议吗?

使用 Material2 示例作为此答案的起点。以下是如何做到这一点:

Give an id to your panel, e.g. mySelect

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

... then change your component class:

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 link 这里:PLUNKER DEMO

此示例向您展示如何订阅状态,以便下拉列表显示当前状态。因此,如果您希望它最初打开,请将 initialState 更改为 true。

有一个按钮可以调度切换状态操作以打开下拉菜单。

这可以修改为切换或创建单独的 open/close 按钮或任何您需要的按钮。

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

}