リスト選択オプションをマット選択リストで一意にするにはどうすればいいですか？

Question

は私がAngular2素材マット選択リスト内でユニークなリストの選択を行う必要があり、前記ユースケース..私は

https://github.com/angular/material2/blob/master/src/demo-app/list/list-demo.html 

と

https://github.com/angular/material2/blob/master/src/lib/list/selection-list.spec.ts

を経てい

を持っています助けてください。

Answer 1

私はまったく同じ問題を抱えています。 私の最初のアプローチは、材料選択リストのチェックボックスを隠すことでした。 （chooseChange）に、私のモーダルを破棄し、データをその親に送り返した関数を呼び出します。

セレクトダイアログcomponent.html

<mat-selection-list> 
    <mat-list-option *ngFor="let option of options" [value]="option.value" (selectionChange)="onSelectedOptionsChange(value)"> {{option.name}} </mat-list-option> 
</mat-selection-list> 

選択し、ダイアログcomponent.ts

onSelectedOptionsChange(value) {this.dialogRef.close(value);} 

また、（私は上記のコメントのように）、CSSで添加

.mat-pseudo-checkbox {display: none;} 

それはそれでした。できます。あなたが少し遅れていることが分かるまで、それはクールに見え、すべてが素敵です。そして、モーダルを何度も切り替えると、それがずっと遅れて始まることがわかります。

---

ここで私の第2のアプローチ（これもまたはるかに正しいようです）。 mat-selection-listを使用する代わりに、mat-listを使用し、マットボタンを内側に配置します。

選択 - ダイアログコンポーネント-v2.htmlを

<mat-list> 
    <mat-list-item *ngFor="let option of options" (click)="onSelectedOptionsChange(option.value)"> 
    <button mat-button> {{option.name}} </button></mat-list-item> 
</mat-list> 

それが役に立てば幸い！