清除 mat-select 选择 Angular material。

Question

我已经实现了 mat-multi-select 功能。我具有搜索功能，并且能够一次选择多个选项。选择后当我点击生成按钮时，我想清除所有的选择。我可以清除搜索栏中的值，但是如果我打开多选下拉框，所选值仍然存在。如何清除这些值。

HTML代码

<mat-select [formControl]="cMultiCtrl" [multiple]="true" required (selectionChange)="selectionChange($event)">
              <mat-option>
              <ngx-mat-select-search placeholderLabel="Search" noEntriesFoundLabel="No Matching Value Found" [formControl]="cMultiFilterCtrl"></ngx-mat-select-search>
            </mat-option>
              <mat-option *ngFor="let val of filteredCMulti | async" [value]="val.value">
                {{val.name}}
              </mat-option>
            </mat-select>

// the button on click of which I want to clear everything post API call

<button mat-raised-button (click)="generate()" class="download-button">Generate
  </button>

TS 代码

 public filteredCMulti: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
 public cMultiCtrl: FormControl = new FormControl();

ngOnInit() {
this.filteredCMulti.next(this.cvalues.slice());
this.cMultiFilterCtrl.valueChanges
      .pipe(takeUntil(this._onDestroy))
      .subscribe(() => {
        this.filterBanksMulti();
      });
}
ngAfterViewInit() {
    this.setInitialValue();
  }
ngOnDestroy() {
  this._onDestroy.next();
  this._onDestroy.complete();
}
private setInitialValue() {
  this.filteredCMulti
    .pipe(take(1), takeUntil(this._onDestroy))
    .subscribe(() => {          
      this.singleSelect.compareWith = (a, b) => a.id === b.id;
    });
}
 selectionChange(event){
      this.cvalue = event.value;
  }
private filterBanksMulti() {
  if (!this.cvalues) {
    return;
  }
  let search = this.cMultiFilterCtrl.value;
  if (!search) {
    this.filteredCMulti.next(this.cvalues.slice());
    return;
  } else {
    search = search.toLowerCase();
  }
  // filter the banks
  this.filteredCMulti.next(
    this.cvalues.filter(bank => bank.name.toLowerCase().indexOf(search) > -1)
  );
}
generate(){
    let msg = '';
     
// some logic here

        else{
          this.commonService.showSnackBar("Value generated")
          this.filteredCMulti = new ReplaySubject; // this clears the search bar but not values, they are still selected 
          this.table();
        }}
    })
  }

- Bitly

---

尝试使用 this.cMultiCtrl.reset()。 - Gunnar B.

Answer 1

将元素引用提供给您的 <mat-select>

<mat-select #matRef [formControl]="cMultiCtrl" [multiple]="true" required (selectionChange)="selectionChange($event)">
          <mat-option>
          <ngx-mat-select-search placeholderLabel="Search" noEntriesFoundLabel="No Matching Value Found" [formControl]="cMultiFilterCtrl"></ngx-mat-select-search>
        </mat-option>
          <mat-option *ngFor="let val of filteredCMulti | async" [value]="val.value">
            {{val.name}}
          </mat-option>
        </mat-select>

并更新您的ts文件，如下所示：

@ViewChild('matRef') matRef: MatSelect;

clear() {
  this.matRef.options.forEach((data: MatOption) => data.deselect());
}

你可以通过有条件地调用 deselect() 来优化 clear()

- YogendraR

---

不要忘记导入 import { MatOption } from '@angular/material/core'; 和 import { MatSelect } from '@angular/material/select';。 - Jordy