web-dev-qa-db-ja.com

angle6マテリアルマット選択リストで現在選択されている値

Angular Material2mat-selection-list）での作業、現在のオプションが選択されているか選択されていないかを識別できる[ブール値]。

compnenent.html

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe'>
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

component.ts

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  onSelection(e, v){
   console.error(e.option.selected,v); 
  }
}

e.option.selectedは、現在のオプションが選択されているかどうかを通知します。

現在選択されている値を識別する方法は？ ngModelとngModelChangeおよびclickで複数の組み合わせを試しましたが、何も機能しません私。

https://stackblitz.com/edit/angular-eyjdfp-qgjhvd?file=app%2Flist-selection-example.ts

angularangular-materialangular-material2angular6
5
Anil Kumar Arya

SelectionChange e.option.valueの$eventを取得することにより、現在選択されている値を取得できます。

component.ts

current_selected: string;

onSelection(e, v){
   this.current_selected = e.option.value;
}

component.html

<p>
  Current selected value: {{ current_selected }}
</p>

ボーナス

テンプレートでshoes.selectedOptions.selectedのselectedプロパティを呼び出すことにより、選択したすべてのアイテムをリストできます。

component.html

<p>Selected:</p>
<ul>
  <li *ngFor="let i of shoes.selectedOptions.selected">
    {{ i.value }}
  </li>
</ul>

ワーキングデモ

14
Roel

mat-list-optionでclickイベントバインディングを使用します。

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
      <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe' (click)="getValue($event)">
        {{shoe}}
      </mat-list-option>
</mat-selection-list>

コンポーネントTypeScript：

getValue(event){
    console.log(event.target.parentNode.innerText);
}
5
Prachi
 <mat-selection-list class="addressList" #userAddressList>
          <mat-list-option *ngFor="let userAddress of userAddressesArray"
          (click)="onAddressSelection(userAddress)">
                  {{userAddress}}
                </mat-list-option>
              </mat-selection-list>
In TypeScript


  private onAddressSelection(selectedItem:any) {
   let  selectedOption = selectedItem;


  }
2
Madan Dale

私はこれに対する解決策を見つけるのにかなりの時間を費やしましたが、すべてが無駄になりました...幸いなことに、私はそれに対するアイデアを思いつきました。

---- checkListItemsは、公開するすべてのアイテムで構成される配列です----

component.html

<mat-selection-list #checkItems (selectionChange)="onSelection($event, checkItems.selectedOptions.selected)">
  <mat-list-option *ngFor="let check of checklistItems">
    {{check.label}}
  </mat-list-option>
</mat-selection-list>

Mat-selection-listでは、選択したすべてのアイテムのイベントとvalueを送信しているため、このvalueは実際にMatSelectionListの配列です。そして、.tsファイルで選択したアイテムの値を解析する必要があります。

component.ts

selectedOptions = [];
checkedValues = [];

onSelection(event, value) {
    this.checkedValues = [];
    this.selectedOptions = value;
    for (let i = 0; i < this.selectedOptions.length; i++) {
      this.checkedValues.Push(this.selectedOptions[i]._text.nativeElement.innerText);
    }
}

そのため、MatSelectionList配列（この場合、私のvalue配列）は選択されているすべての項目で構成されるため、checkedValuesという配列があり、選択または選択解除が行われるたびに削除されます。そのため、毎回削除しない場合は、選択するたびに同じアイテムを追加し続けます。 （行this.checkedValues = []を削除し、forループの終了後にcheckedValues配列を出力することで、これを試すことができます）。

お役に立てれば！！

1
Shubham Arya

コンポーネント.tsで：

export class ListSelectionExample {
 typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

 selectedShoes;

 onSelection(e, v){
   this.selectedShoes = v.selected.map(item => item.value);

  console.error(e.option.selected,v); 
 }
}
1
Bhanu Tej P