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>