在 mat-select 上过滤

Question

我需要在选择上过滤数据，因为选项太多。 我是这样做的：

        <mat-form-field>
          <mat-select placeholder="Unit.." (change)="onTabChange(element, $event.value.id, 'assignedUnit')">
            <input matInput type="text" (keyup)="filterListCareUnit($event.target.value)">
            <mat-option *ngFor="let careUnit of listCareUnits" [value]="careUnit">
              {{ careUnit.label }}
            </mat-option>
          </mat-select>
        </mat-form-field>

上键时，我正在调用filterListCareUnit($event.target.value)

但在这个函数中我不知道使用过滤器 rxjs

我有我的listCareUnits ，我想删除所有不包含$event.target.value

现在我这样做了，但显然不起作用，我的列表总是包含相同的项目：

  filterListCareUnit(val) {
    console.log(val);
    this.listCareUnits.filter((unit) => unit.label.indexOf(val));
  }

angular/rxjs 新手 .. 感谢您的帮助

Answer 1

您必须分配返回的过滤列表。

 filterListCareUnit(val) {
    console.log(val);
    this.listCareUnits = this.listCareUnits.filter((unit) => unit.label.indexOf(val) > -1);
  }

但是为了不丢失初始数组的数据，最好使用另一个总是包含初始数据集的数组进行处理。

anotherArray = this.listCareUnits;
filterListCareUnit(val) {
        console.log(val);
        this.listCareUnits = this.anotherArray.filter((unit) => unit.label.indexOf(val) > -1);
      }

Answer 2

我知道已经回答了，但是您也可以使用“ mat-select-filter”。

https://www.npmjs.com/package/mat-select-filter

希望这会帮助其他人。

Answer 3

这是 ts 文件中没有代码的快速解决方法

 <mat-select [(ngModel)]="result"> <input matInput placeholder="filter.." #filterplc> <div *ngFor="let opt of options "> <mat-option *ngIf="opt.includes(filterplc.value)" [value]="opt"> {{opt}} </mat-option> </div> </mat-select>