Неверный угловой аргумент 'z, x, y' для канала 'AsyncPipe'

Question

Я пытаюсь сделать поле ввода автозаполнения.Учебник по Angular Material был простым, кажется, ему не нравятся данные, которые я получаю от API.

ERROR Error: InvalidPipeArgument: X,Z,Y  for pipe 'AsyncPipe'

.ts file

formServer = new FormControl();
filteredOptions: Observable<string[]>;

ngOnInit() {
    this.filteredOptions = this.formServer.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );
  }

  private _filter(value): string[] {
    const filterValue = value;
    return this.servers.filter(option => option.includes(filterValue));
  }

.html code

   <mat-form-field class="w-100">
        <input type="text" placeholder="Server" aria-label="Server" matInput [formControl]="formServer" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let item of servers | async" [value]="item">
            {{item}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

Ответ API

{"servers":["z","x","y"]}

Answer 1

Учитывая, что вы можете сделать this.servers.filter(//... и не получить ошибку сборки, я предполагаю, что this.servers - это простой массив, а не наблюдаемый / обещание.

Таким образом, канаву асинхронную трубу здесь:

<!-- Instead of: <mat-option *ngFor="let item of servers | async" [value]="item"> -->
<mat-option *ngFor="let item of servers" [value]="item">