Angular：您在需要流的地方提供了一个无效的对象。 你可以提供一个 Observable、Promise、Array 或 Iterable

Question

我正在使用我自己的值数组来学习材料自动完成（带过滤器）组件的教程，但我遇到了以下错误。

core.js:1624 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at 

我的TS：

games: string[] = ['Title 1', 'Title 2', 'Title 3', 'RPG 1', 'FPS 1', 'MMO'];

  searchTerm = new FormControl();
  filteredGames: Observable<string[]>;

  constructor(private store: Store<fromRoot.State>) { }

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

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.games.filter(option => option.toLowerCase().includes(filterValue));
  }

我的 HTML：

<section class="search" fxLayoutAlign="center center" fxLayout="column">
  <form (ngSubmit)="onSubmit()">
      <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="searchTerm" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let option of filteredGames | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </form>
</section>

我环顾四周，但没有运气。 我很困惑，因为我使用的是 Observable。 我正在研究 Angular 6。

我也试过复制整个例子..但我在那里遇到了同样的错误。

Answer 1

有同样的错误，也复制粘贴的例子。 我的问题是导入错误。 有：

import {startWith} from "rxjs/internal/operators/startWith";

代替：

import {startWith} from "rxjs/operators";

我希望它可以帮助别人。

Answer 2

你有两次<form> 。 如果将两者合并，则可以正常工作。

<form (ngSubmit)="onSubmit()">
  <form class="example-form">
  ...
</form>