Question

我正在使用倍数。我想在控制台中显示选定的值。我正在使用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

您应该能够通过multiple获得值（在this.searchUserForm.get('userType').value的情况下将是一个数组）。

根据您在value中作为mat-option绑定的内容，您将获得一个由不同值/对象组成的数组。

要获取包括key和value的完整对象，请像这样[value]="filters"进行绑定。如果只需要一个其中一个属性的数组，则将该属性添加到绑定中。

在ts文件中显示从Mat-Select Multiple中选择的值

1 个答案: