过滤垫选择答案

【问题标题】：Filter on a mat-select过滤垫选择
【发布时间】：2018-06-01 14:11:36
【问题描述】：

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

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

【问题讨论】：

您没有在该代码中使用 rxjs。 material2 在内部使用它。无论如何，您的问题很可能是您没有将过滤后的列表分配回您的 listCareUnits var：this.listCareUnits = this.listCareUnits.filter((unit) => unit.label.indexOf(val) > -1);

标签： angular typescript rxjs

【解决方案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);
      }

【讨论】：

【解决方案2】：

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

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

希望这对其他人有帮助。

【讨论】：

atm，所有这些 mat-select 过滤库都还不够完善，无法在生产中使用。在将其引入您的项目之前，请确保检查并再次检查其使用情况。

【解决方案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>

【讨论】：