J'utilise angular4 avec Redux et du matériel angulaire pour concevoir ma page Web. J'essaie de configurer le panneau md-select pour qu'il soit ouvert. exemple de scénario: cliquer sur le bouton distribue une action pour ouvrir le panneau de sélection s'ouvre pour afficher toutes les options.

J'utilise des actions redux pour manipuler l'état de mes composants. Donc, fondamentalement, j'ai besoin de déclencher une action pour que la sélection s'ouvre.

Aucune suggestion?

0
D-W-A 10 août 2017 à 14:02

3 réponses

Meilleure réponse

En utilisant l'exemple Material2 comme point de départ pour cette réponse. Voici comment vous pouvez faire cela:

Donnez un identifiant à votre panel, par exemple mySelect

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

... puis changez votre classe de composant:

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

Lien Plunker ici: PLUNKER DEMO

3
Faisal 10 août 2017 à 11:13

Vérifier le lien: https://www.npmjs.com/package/angular2-select#methods

Cela peut vous aider.

-2
Tejal 10 août 2017 à 12:02

Cet exemple vous montre comment vous abonner à l'état afin que la liste déroulante soit quel que soit l'état actuel. Alors changez initialState pour être vrai si vous voulez qu'il s'ouvre initialement.

Il existe un bouton qui distribue l'action de basculement d'état pour ouvrir la liste déroulante.

Cela peut être modifié pour basculer ou créer des boutons d'ouverture / fermeture séparés ou tout ce dont vous avez besoin.

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

mon-composant.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 })
  }

}
1
Meeker 10 août 2017 à 16:11