Question

我正在为项目使用Angular Material，并使用自动完成填充来显示值。

我想通过成角度的pipe功能过滤自动填充中的值。

<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>

现在，在我当前的解决方案中，值已被过滤，但垫组中的所有值都已被过滤。

如果过滤器匹配该值，则只需要显示一个值即可。

我进行了一次突击。任何线索将不胜感激

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

Angular 6 Mat自动完成-未按要求过滤

1 个答案: