简体   繁体   中英

Angular: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

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.

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.

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable xplat You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable Angular 11 error: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable ERROR TypeError: You provided 'null' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable when deploying angular Angular5 : TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable in Angular Services Angular 7 rxjs/forkJoin : You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM