如何从Angular Material选择列表中获取选定列表选项并将其作为Json数组发送

Question

我正在使用角形材料选择列表。以下是我的控制台日志。我想获取所有选中的选项和所有未选中的选项。我想将两者都作为一个JSON数组发送。

  <mat-selection-list #list (selectionChange)="onChangeYuvak($event)">
      <mat-list-option *ngFor="let yuvak of yuvaks"
      (click)="onAreaListControlChanged(list)"
      class="mt-1" [value]="yuvak.user_id">
        <nb-user name="{{yuvak.cnt_first_name + ' ' + yuvak.cnt_last_name}}" size="large" title="{{yuvak.cnt_mobile_no}}"
          picture="{{yuvak.profile_picture}}">
        </nb-user>
        <img matListAvatar src="{{yuvak.profile_picture}}" alt="...">
      </mat-list-option>
    </mat-selection-list>

这是我的ts文件

onChangeYuvak($event) {
    console.log($event);
    console.log($event.option.selectionList.selectedOptions.selected.values);
    this.selectedList = $event.option.selectionList.selectedOptions.selected;
    console.log(this.selectedList)
}

Answer 1

您可以使用map()的Javascript数组：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map。

代码示例：this.shoesSelectionList.selectedOptions.selected.map(s => s.value)

以此，实现一个差异处理程序以取出未选中的内容。

在此处查看我的演示StackBlitz：https://stackblitz.com/edit/angular-material-selection-list-demo1?file=app/list-selection-example.ts

Answer 2

要获取选定的选项，您可以简单地使用{{list.selectedOptions.selected}}，如果要所有选项，则可以使用{{list.options}}。

要遍历数组并执行操作，可以使用.map() JavaScript函数