web-dev-qa-db-fra.com

Reliure à Angular Liste de sélection de matériaux

Je crée une barre d'outils avec une liste de sélection (cases à cocher avec chaque élément de la liste) en utilisant Angular Material 2. Je n'arrive pas à comprendre comment définir les cases à cocher avant que la liste ne soit affichée, puis obtenir la sélection éléments suite à une interaction de l'utilisateur.

J'essaie le contrôle dans un formulaire en pensant que j'ai peut-être besoin de cela pour me lier à ngModel, mais cela ne semble pas aider. Mon html jusqu'à présent est:

<form
  novalidate
  #areaSelectForm="ngForm">

<div>
    <mat-selection-list 
                        #areasList="ngModel"
                        [(ngModel)]="model"
                        id="areaListControl"
                        name="areaListControl"
                        (ngModelChange)="onAreaListControlChanged($event)">
        <mat-list-option *ngFor="let tta of taskTypeAreas" (click)="onCheckboxClick($event)" [value]="tta">
            {{tta}}
        </mat-list-option>
    </mat-selection-list>
</div>

</form>

Cela doit être un chemin emprunté, mais la documentation est difficile à interpréter et je ne semble pas pouvoir trouver d’exemples appropriés.

Toute orientation très bienvenu s'il vous plaît.

angularangular-material
23
TDC

À partir de la version 5.0. , angular supporte maintenant ngModel pour la liste de sélection.

Donc, le code peut être simplifié pour

<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
    <mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
        {{tta.name}}
    </mat-list-option>
</mat-selection-list>

La version expose également un événement ngModelChange pour la liste de sélection. Voici la mise à jour pile blitz

(Réponse originale avant Angular 5.0.0)

Il semble que mat-selection-list ne prenne actuellement pas en charge ngModel ( https://github.com/angular/material2/pull/7456 ), mais il semble que cette prise en charge sera prise en charge dans un proche avenir. En attendant, vous pouvez utiliser une variable de référence #list Pour saisir les options sélectionnées.

// component.html

<mat-selection-list #list>
    <mat-list-option *ngFor="let tta of taskTypeAreas" [selected]="tta.selected" 
        (click)="onAreaListControlChanged(list)" [value]="tta.name">
        {{tta.name}}
    </mat-list-option>
</mat-selection-list>

Ensuite, transmettez la variable de référence à votre méthode onAreaListControlChanged(list) afin que vous puissiez analyser les options sélectionnées.

// component.ts

onAreaListControlChanged(list){
    this.selectedOptions = list.selectedOptions.selected.map(item => item.value);
}

Pour sélectionner les cases à cocher lors du chargement, vous pouvez utiliser la propriété [selected] De chaque <mat-list-option>.

<mat-list-option ... [selected]="tta.selected" ...>

Pour ce faire, vous devrez ajouter une autre propriété à votre tableau.

// component.ts

taskTypeAreas: {
    name: string;
    selected: boolean;
}[] = [
    {
        name: 'Area 1',
        selected: false
    },
    {
        name: 'Area 2',
        selected: false
    },
    {
        name: 'Area 3',
        selected: true
    },
];

Cela fera que Area 3 Sera sélectionné au chargement. Voici un stackblitz en démonstration.

52
LLai