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

Question

我使用 Angular4 与 Redux 和 Angular Material 来设计我的网页。我正在尝试将 md-select 面板设置为打开。示例场景：单击按钮调度一个操作来打开选择面板以显示所有选项。

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

有什么建议么？

Answer 1

使用 Material2 示例作为此答案的起点。您可以按照以下方法执行此操作：

给你的面板一个id，例如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