Angular Materials автоматически завершает загрузку данных, но не фильтрует их, работая идеально под углом 6

Question

Это мой HTML-код.Из примера я взял код. образец кода .Но фильтрация при наборе текста не работает

          <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 на привязку свойства следующим образом.

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

Вот Демонстрация Stackblitz вашего кода

Answer 2

Измените FormControlName на [formControl] <input type="text" [formControl]="planClient" matInput placeholder="Plan Client" [matAutocomplete]="auto">