Angular（2）材质自动完成自定义过滤器

Question

提前感谢您的帮助。

因此，目前我正在根据字符串值过滤搜索结果列表，例如，我有一个 ngFor，它获取“产品名称 1”、“产品名称 2”等字符串列表。它通过没有问题的项目列表并仅拼接我们输入的值。但我需要做的是根据一串关键字过滤掉这些名称。

例如，“产品名称 1”是名称，如果关键字包含字符串的任何部分，那么它的关键字是“产品一产品活动目录帮助台”，那么我必须只显示产品名称，在本例中“产品名称 1" 基于这些关键字。 （希望这是有道理的，下面的代码）

目前，列表会根据字符串是否匹配某些内容进行过滤，例如，如果我开始输入“prod”，则所有以“prod”开头的内容都会出现。但是我需要做的是基于它是否包含该文本的字符串，例如，假设我们再次开始输入“prod”......并且在我的数组中我有一个字符串显示“产品 1 活动目录等“我希望它通过它找到它，但如果我输入活动目录，它也必须工作

products.component.ts：

  ngOnInit() {

    // proudct is an input field shown below
      this.filteredProducts = this._form1.controls['product'].valueChanges
      .pipe(
        startWith<string | Product>(''),
        map(value => typeof value === 'string' ? value : value.name),
        map(name => name ? this._filter(name) : this.products.slice())
      );

  }

  // Display the result in the dropdown list
  displayFn(product?: Product): string | undefined {
    return product ? product.name : undefined;
  }

  // Filter through the list of items
  private _filter(name: string): Product[] {
    if(name) {

      const filterValue = name.toLowerCase();

      return this.products.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
    }
  }

product.component.html：

<form [formGroup]="_form1" (ngSubmit)="_onFirstSubmit()" class="step-container">

    <mat-form-field class="mat-full-width-container">
      <input type="text" placeholder="Product or service name" aria-label="product" matInput formControlName="product" [matAutocomplete]="auto" (input)="prodChanged()" (blur)="selectProduct()">
      <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
        <mat-option *ngFor="let product of filteredProducts | async" [value]="product">
          {{ product.name }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

</form>

请帮忙，我试了好几件好像都搞不定，谢谢

Answer 1

尝试像这样改变这一行：

return this.products.filter(option => 
 option.name.toLowerCase().indexOf(filterValue) >= 0);