Question

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

        <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

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

count(*)

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

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

Answer 2

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

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

希望这会对其他人有所帮助。

在mat-select上过滤

2 个答案: