angular6 material mat-selection-list 中的当前选定值

Question

使用Angular Material2 mat-selection-list，能够识别当前选项是否被选中[Boolean]。

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

Answer 1

在你的组件中 .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 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

您可以通过获取 e.option.value 的 selectionChange $event

来获取当前选择的值

component.ts

current_selected: string;

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

component.html

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

奖金

您可以通过在模板中调用属性 selected of shoes.selectedOptions.selected 来列出所有选中的项目。

component.html

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

Working Demo

Answer 4

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

我花了很多时间为此寻找解决方案，但一切都是徒劳的... 幸运的是，我想出了一个主意，希望对您有所帮助。

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

所以，我有一个名为 checkedValues 的数组，每次进行选择或取消选择时我都会删除它，因为 MatSelectionList 数组（在本例中我的 value 数组）将包含所有被选中的项目。所以如果你不想每次都删除它，它会在每次选择时继续附加相同的项目。（您可以通过删除行 this.checkedValues=[] 并在 for 循环完成后打印 checkedValues 数组来尝试此操作）。

希望对您有所帮助！！

Answer 6

在最近的 Angular 版本中，您应该使用 options:

在您的模板中：

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

在你的class中：

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

angular6 material mat-selection-list 中的当前选定值

Current selected value in angular6 material mat-selection-list

angular-material

angular-material2

angular

angular6

component.html

component.ts