web-dev-qa-db-ja.com

Angularマテリアル選択リストのバインド

Angular Material 2を使用して、選択リスト（各リスト項目のチェックボックス）を含むツールバーを作成しています。リストが表示される前にチェックボックスを設定し、ユーザーに従って選択項目を取得する方法がわかりません。インタラクション。

私はこれをngModelにバインドする必要があると考えてフォーム内のコントロールを試していますが、これは役に立たないようです。これまでの私のHTMLは：

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

これはよく踏まれたパスでなければなりませんが、ドキュメントを解釈するのは難しく、適切な例を見つけることができないようです。

どんなガイダンスも大歓迎です。

angularangular-material
23
TDC

バージョン 5.0. の時点で、angularマテリアルは、選択リストでngModelをサポートするようになりました。

したがって、コードは次のように単純化できます。

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

このリリースでは、選択リストのngModelChangeイベントも公開されます。更新された stack blitz

（Angular 5.0.0の前の元の回答）

Mat-selection-listは現在ngModelをサポートしていないようです（ https://github.com/angular/material2/pull/7456 ）が、近い将来サポートされるようです。それまでの間、参照変数#listを使用して、選択したオプションを取得できます。

// 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>

次に、選択したオプションを解析できるように、参照変数をonAreaListControlChanged(list)メソッドに渡します。

// component.ts

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

ロード時にチェックボックスを選択するには、各[selected]の<mat-list-option>プロパティを使用できます。

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

これを行うには、配列に別のプロパティを追加する必要があります。

// component.ts

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

これにより、ロード時にArea 3が選択されます。これが stackblitz のデモです。

52
LLai