angular - 在垫选择上过滤

标签 angular typescript rxjs

我需要根据选择筛选数据,因为选项太多。 我是这样做的:

        <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 的新手 .. 感谢您的帮助

最佳答案

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

 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);
      }

关于angular - 在垫选择上过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50645353/

相关文章:

javascript - typescript 导入模块作为变量不起作用

javascript - Service Worker 被删除并且即使在注册时指定根范围后也不会收到推送事件

html - Angular 2 - 子组件不从父组件继承样式

javascript - RxJS:在 X 排放后更改 throttleTime

angular - Kendo Angular 网格列在 ng-template 中传递数据项

angular - 从 html 文件调用基于条件的函数而不使用 *ngIf

css - 使用 React Styled Components 在两种类型的组件之间共享相同的样式

javascript - 在提交时将选中的复选框的值保存在数组中 Ionic

angular - RXJS 将 Observable 转换为 bool 值

javascript - Concat Array of Observables 并有一个单一的订阅输出