在 ts 文件中显示来自 mat-select 多个的 selected 值

Question

我正在与 multiple.I 一起使用，想在控制台中显示选定的值。我正在使用 Angular 6 Material 设计我正在获取 html 中的值。但我想在 ts 文件中以逗号分隔所有选定的值。下面是我的代码。

<form [formGroup]="searchUserForm" fxFlex fxLayout="column" autocomplete="off" style="margin: 30px">
    <mat-select placeholder="User Type" formControlName="userType" multiple>
        <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key" (click)="tosslePerOne(allSelected.viewValue)">
            {{filters.value}}
        </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    </mat-select>
</form>

import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { MatOption } from '@angular/material';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent { 
  searchUserForm: FormGroup;

  userTypeFilters = [
    {
      key: 1, value: 'Value 1',
    },
    {
      key: 2, value: 'Value 2',
    },
    {
      key: 3, value: 'Value 3',
    },
    {
      key: 4, value: 'Value 4',
    }
  ];
  @ViewChild('allSelected') private allSelected;

  constructor(private fb: FormBuilder){}

  ngOnInit() {
    this.searchUserForm = this.fb.group({
      userType: new FormControl('')
    });
  }
tosslePerOne(all){ 
   if (this.allSelected.selected) {  
    this.allSelected.deselect();
    return false;
}
  if(this.searchUserForm.controls.userType.value.length==this.userTypeFilters.length)
    this.allSelected.select();

}
  toggleAllSelection() {
    if (this.allSelected.selected) {
      this.searchUserForm.controls.userType
        .patchValue([...this.userTypeFilters.map(item => item.key), 0]);
    } else {
      this.searchUserForm.controls.userType.patchValue([]);
    }
  }
}

任何人都可以帮助我如何做到这一点。

Answer 1

您应该能够通过 this.searchUserForm.get('userType').value.

获取值（在 multiple 的情况下将是一个数组）

根据您在 mat-option 中作为 value 绑定的内容，您将获得一组不同的 values/objects.

要获得包含 key 和 value 的完整对象，请像这样绑定它 [value]="filters"。如果您只想要其中一个属性的数组，请将属性添加到绑定中。

在 ts 文件中显示来自 mat-select 多个的 selected 值

Show selected value from mat-select multiple in ts file

angular

angular-material-6