角度无效参数"z，x，y"用于管道"异步管道"

Question

我正在尝试做一个自动完成输入框。角度材料教程很简单，它似乎不喜欢我从 API 获得的数据。

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

.ts 文件

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代码

   <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>

接口响应

{"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">