md-selectパネルをデフォルトで開くように設定する方法

Question

私は、Webページをデザインするために、Reduxと角度のある材料でangular4を使用しています。 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

Answer 2

チェックリンク： https://www.npmjs.com/package/angular2-select#methods

これが役に立ちます。

Answer 3

この例では、現在の状態がどんなものでもドロップダウンになるように状態をサブスクライブする方法を示します。最初に開きたい場合は、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; 
    } 
    } 
} 

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

}