angular6 材料 mat-selection-list 中的當前選定值

Question

使用 Angular Material2 mat-selection-list ，能夠識別當前選項是選中還是未選中[Boolean]。

組件.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>

組件.ts

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

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

e.option.selected通知當前選項是選中還是未選中。

如何識別當前選定的值？ 嘗試使用ngModel 和 ngModelChange 的多種組合並單擊，對我來說沒有任何效果。

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

Answer 1

您可以通過獲取 selectionChange $event e.option.value來獲取當前選定的值

組件.ts

current_selected: string;

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

組件.html

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

獎金

您可以通過在模板中調用shoes.selectedOptions.selected屬性 selected 來列出所有選定的項目。

組件.html

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

工作演示

Answer 2

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

組件打字稿：

getValue(event){
    console.log(event.target.parentNode.innerText);
}

Answer 3

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


  } 

Answer 4

在最近的 Angular 版本中，您應該使用options ：

在您的模板中：

<mat-selection-list [multiple]="false" (selectionChange)="selChange($event)">

在你的課堂上：

public selChange(e: MatSelectionListChange) {
    let selection = e.options[0].value;
}

Answer 5

在您的組件 .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); 
 }
}

Answer 6

我花了很多時間為此尋找解決方案，但一切都是徒勞的......幸運的是我已經想出了一個想法，希望它有所幫助。

----checkListItems 是包含我要發布的所有項目的數組----

組件.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>

在墊選擇列表我送一個事件，所有選定項的值，所以這個值是我說的其實是MatSelectionList的數組。 我必須在我的 .ts 文件中解析我選擇的項目的值。

組件.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);
    }
}

因此，我有一個名為 checkedValues 的數組，每次進行選擇或取消選擇時我都會刪除它，因為 MatSelectionList 數組（在本例中為我的值數組）將包含所有被選中的項目。 所以如果你不每次都刪除它，它會在每次選擇時繼續附加相同的項目。 （您可以通過刪除此行this.checkedValues=[]並在 for 循環完成后打印 checkedValues 數組來嘗試此操作）。

希望這可以幫助！！