Angular 如何将md select panel设置为默认打开

我正在使用angular4和Redux以及angular材质来设计我的网页。 我正在尝试将md选择面板设置为打开。 示例场景：单击按钮分派操作以打开“选择”面板以分派所有选项

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

---

有什么建议吗？

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

为您的面板提供id，例如

mySelect

---

---

此处的Plunker链接：

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

为您的面板提供id，例如

mySelect

---

---

此处的Plunker链接：

此示例演示如何订阅状态，以便下拉列表将是当前状态。因此，如果您希望初始打开它，请将

initialState

更改为true

有一个按钮，用于调度切换状态操作以打开下拉列表

这可以修改为切换或创建单独的打开/关闭按钮或任何您需要的

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

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

}

my component.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;
    }
  }
}

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

}

从'@angular/core'导入{Component，ViewChild，AfterViewInit}；
从“@angular/material”导入{MdSelect}；
@组成部分({
选择器：“我的组件”，
模板：`
{{food.viewValue}
打开选择
`,
})
导出类SelectOverview示例实现AfterViewInit{
食物=[
{value:'steak-0'，viewValue:'steak'}，
{value:'pizza-1'，viewValue:'pizza'}，
{value:'tacos-2'，viewValue:'tacos'}
];
@ViewChild（'mySelect'）mySelect:MdSelect；
控制器（私人商店：商店）{
store.select（state=>state.isDropDownOpen）.subscribe（isDropDownOpen=>{
如果（isDropDownOpen）{
this.mySelect.open（）
}否则{
this.mySelect.close（）
}
})
}
openSelect（）{
this.store.dispatch（{type:toggleSelect，payload:true}）
}
}

此示例向您展示了如何订阅状态，以便下拉列表显示当前状态。因此，如果您希望初始打开它，请将

initialState

更改为true

有一个按钮，用于调度切换状态操作以打开下拉列表

这可以修改为切换或创建单独的打开/关闭按钮或任何您需要的

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

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

}

my component.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;
    }
  }
}

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

}

从'@angular/core'导入{Component，ViewChild，AfterViewInit}；
从“@angular/material”导入{MdSelect}；
@组成部分({
选择器：“我的组件”，
模板：`
{{food.viewValue}
打开选择
`,
})
导出类SelectOverview示例实现AfterViewInit{
食物=[
{value:'steak-0'，viewValue:'steak'}，
{value:'pizza-1'，viewValue:'pizza'}，
{value:'tacos-2'，viewValue:'tacos'}
];
@ViewChild（'mySelect'）mySelect:MdSelect；
控制器（私人商店：商店）{
store.select（state=>state.isDropDownOpen）.subscribe（isDropDownOpen=>{
如果（isDropDownOpen）{
this.mySelect.open（）
}否则{
this.mySelect.close（）
}
})
}
openSelect（）{
this.store.dispatch（{type:toggleSelect，payload:true}）
}
}

非常有用，谢谢。但是我正在使用redux操作来操纵我的组件状态。所以基本上我需要启动一个操作来设置选择打开。你的帖子中没有提到：）这真的很有帮助，谢谢。但是我正在使用redux操作来操纵我的组件状态。所以基本上我需要启动一个操作来设置选择打开。你的帖子中没有提到：）你需要更新你的问题来反映你想要默认打开的内容。是否希望状态默认打开此控制器？然后该组件在初始化时读取该状态？将您的状态设置为默认打开与仅将此选择默认打开不同。具体说明您的要求。@Meeker我更新了描述以解释我的用例。您的示例场景表明，面板最初是关闭的，直到有人单击某个东西，这与默认打开相反。现在这更让人困惑了。你需要更新你的问题，以反映你想要默认打开的内容。是否希望状态默认打开此控制器？然后该组件在初始化时读取该状态？将您的状态设置为默认打开与仅将此选择默认打开不同。具体说明您的要求。@Meeker我更新了描述以解释我的用例。您的示例场景表明，面板最初是关闭的，直到有人单击某个东西，这与默认打开相反。所以现在这更让人困惑。