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

Question

I'm following the tutorial of the Material autocomplete (with filter) component with my own array of values, but I hit the following error.

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 

My 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));
  }

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

I've looked around, but no luck. I'm confused since I'm using an Observable. I'm working on Angular 6.

I've also tried to copy the whole example.. but I'm getting the same error there.

Answer 1

Had the same error, copy pasted example as well. My problem was a wrong import. Had:

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

instead of:

import {startWith} from "rxjs/operators";

I hope it helps someone else.

Answer 2

You have <form> twice. If you merge the two, it works ok.

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