Question

这是我的HTML代码。从示例中我获取了代码。 sample code。但是打字时过滤不起作用

          <mat-form-field appearance="outline">
        <input type="text" formControlName="planClient" matInput placeholder="Plan Client" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let client of filteredOptions | async" [value]="client">
            {{client}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

这是我的.ts文件

  filteredOptions: Observable<string[]>;
  clients: string[] = [
    'Alabama',
    'California',
    'Colorado',
    'Connecticut',
    'SelectHealth',
    'UMR'
  ];
  planClient = new FormControl();

    this.filteredOptions = this.planClient.valueChanges
  .pipe(
    startWith(''),
    map(value => this._filter(value))
  );

  public _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.clients.filter(client => client.toLowerCase().includes(filterValue));

}

Answer 1

将formControlName更改为[formControl] <input type="text" [formControl]="planClient" matInput placeholder="Plan Client" [matAutocomplete]="auto">

Answer 2

在这里，您需要使用以下方式将formControlName更改为属性绑定。

<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">

这里是Demo on Stackblitz of your code

Angular Materials会自动完成数据加载，但不能完全正常工作地进行过滤6

2 个答案: