Angular 6 Mat AutoComplete - 未按要求过滤

Question

我在我的项目中使用 Angular Material 并使用 mat auto complete 来显示值。

我想通过 pipe Angular 中可用的功能过滤自动完成中的值。

<form [formGroup]="applicationUserForm">
    <mat-form-field style="width: 100%">
        <input type="text" matInput placeholder="Choose Department..." formControlName="department" [matAutocomplete]="autoGroup">
        <mat-autocomplete #autoGroup="matAutocomplete">
            <mat-optgroup *ngFor="let group of autoCompleteData | search: applicationUserForm.value.department" [label]="group.casinoName">
                    <mat-option *ngFor="let dept of (group.departments)">
          {{ dept.DEPARTMENTNAME }}
                    </mat-option>
            </mat-optgroup>
        </mat-autocomplete>
    </mat-form-field>
</form>

现在，在我当前的解决方案中，值正在被过滤，但我正在过滤值与 mat 组中的整个值。

如果过滤器与该值匹配，我只需要显示单个值。

我做了一个stackblitz。任何线索将不胜感激

https://stackblitz.com/edit/angular-material-with-angular-v5-8kj3u1?file=app/app.component.html

Answer 1

您需要过滤选项，而不仅仅是组：

<mat-form-field style="width: 100%">
  <input type="text" matInput placeholder="Choose Department..." formControlName="department" [matAutocomplete]="autoGroup">
  <mat-autocomplete #autoGroup="matAutocomplete">
    <mat-optgroup *ngFor="let group of autoCompleteData | search: applicationUserForm.value.department" [label]="group.casinoName">
      <mat-option *ngFor="let dept of (group.departments) | searchOptions: applicationUserForm.value.department">
        {{ dept.DEPARTMENTNAME }}
      </mat-option>
    </mat-optgroup>
  </mat-autocomplete>
</mat-form-field>

显然创建一个新管道来使用这些选项：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchOptions'
})
export class SearchOptionsPipe implements PipeTransform {

  transform(items: Array<any>, args?: any): any {
    if (!args) {
      return items;
    }
    return items.filter(
      item => item.DEPARTMENTNAME.toLowerCase().indexOf(args.toLowerCase()) >= 0
    );
  }
}