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?
3 réponses
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
Vérifier le lien: https://www.npmjs.com/package/angular2-select#methods
Cela peut vous aider.
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 })
}
}
Questions connexes
De nouvelles questions
angular
Questions sur Angular (à ne pas confondre avec AngularJS), le framework web de Google. Utilisez cette balise pour les questions angulaires qui ne sont pas spécifiques à une version individuelle. Pour l'ancienne infrastructure Web AngularJS (1.x), utilisez la balise angularjs.