如何设置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 })
}
}
我正在使用带有 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 })
}
}