как получить выбранные параметры списка из Angular Material, выбрать List и отправить его в виде массива 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

Чтобы получить выбранные параметры, вы можете просто использовать {{list.selectedOptions.selected}}, а если вам нужны все параметры, вы можете использовать {{list.options}}.

. Для перебора массива и выполнения операций вы можете использовать функцию .map() javascript.

Answer 2

Вы можете использовать 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