用于对象数组的 Angular2 Material 自动完成自定义过滤器

Question

https://material.angular.io/components/autocomplete/overview 文档介绍了如何使用自定义过滤器进行自动完成数组

options = [
    'One',
    'Two',
    'Three'
  ];

有没有办法过滤对象数组，并通过某些属性(例如通过 id 和 cat)过滤？

 options = [
        {"id":1,"name":"colour","cat":"red"},
        {"id":2,"name":"colour","cat":"blue},
        {"id":3,"name":"colour","cat":"green"}
      ];

Answer 1

以下代码对我有用:

import { Component, OnInit } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

    myForm: FormControl;
    filteredOptions: Observable<any[]>;

    options: any[] = [
        { "id": 1, "name": "colour", "cat": "red" },
        { "id": 2, "name": "colour", "cat": "blue" },
        { "id": 3, "name": "colour", "cat": "green" }
    ];

    ngOnInit(): void {

        this.myForm = new FormControl();
        this.filteredOptions = this.myForm.valueChanges
            .startWith(null)
            .map(term => this.findOption(term));

    }


    findOption(val: string) {

        return this.options.filter((s) => new RegExp(val, 'gi').test(s.cat));
    }
}

这是您的 HTML 模板:

<form class="example-form">
  <mat-form-field>
    <input matInput placeholder="Choose option" [formControl]="myForm" [matAutocomplete]="auto" />
  </mat-form-field>

  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let item of filteredOptions | async" [value]="item">
      <div>{{item.cat}}</div>
    </mat-option>
  </mat-autocomplete>
</form>