角度:您提供了一个无效对象,该对象应用于流。您可以提供一个Observable,Promise,Array或Iterable

时间:2018-07-17 19:21:22

标签: angular angular-material

我正在使用具有自己的值数组的“材质自动完成(带过滤器)”组件的教程,但是遇到以下错误。

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。

我也试图复制整个示例。.但是我在那遇到了同样的错误。

2 个答案:

答案 0 :(得分:0)

您有两次<form>。如果将两者合并,就可以了。

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

答案 1 :(得分:0)

发生相同的错误,也请复制粘贴的示例。我的问题是输入错误。 曾经:

WARN  9981874     90     2019-11-22 23:53:35     org.apache.ignite.internal.processors.cache.GridCachePartitionExchangeManager     Executor task launch worker-2     Still waiting for initial partition map exchange [fut=GridDhtPartitionsExchangeFuture [dummy=false, forcePreload=false, reassign=false, discoEvt=DiscoveryEvent [
    evtNode=TcpDiscoveryNode [id=c54ef27b-049e-466e-a594-3fffb01bd1e3, addrs=[10.141.180.69, 10.141.26.13, 10.142.225.122, 127.0.0.1], sockAddrs=[/10.141.26.13:47512, /127.0.0.1:47512, nvmbd2bgt130d00.rjil.ril.com/10.141.180.69:47512, /10.142.225.122:47512], discPort=47512, order=14, intOrder=9, lastExchangeTime=1574447015048, loc=true, ver=1.7.0#20160801-sha1:383273e3, isClient=false], topVer=14, nodeId8=c54ef27b, msg=null, type=NODE_JOINED, tstamp=1574446951740], 
    crd=TcpDiscoveryNode [id=81757f48-d3e7-466d-9058-8edc84496f4f, addrs=[10.141.180.69, 10.141.26.13, 10.142.225.122, 127.0.0.1], sockAddrs=[/127.0.0.1:47511, /10.141.26.13:47511, nvmbd2bgt130d00.rjil.ril.com/10.141.180.69:47511, /10.142.225.122:47511], discPort=47511, order=1, intOrder=1, lastExchangeTime=1574446951670, loc=false, ver=1.7.0#20160801-sha1:383273e3, isClient=false], exchId=GridDhtPartitionExchangeId [topVer=AffinityTopologyVersion [topVer=14, minorTopVer=0], nodeId=c54ef27b, evt=NODE_JOINED], added=false, initFut=GridFutureAdapter [resFlag=0, res=null, startTime=1574446955042, endTime=0, ignoreInterrupts=false, state=INIT], init=false, topSnapshot=null, lastVer=null, partReleaseFut=null, affChangeMsg=null, skipPreload=false, clientOnlyExchange=false, initTs=1574446955052, centralizedAff=false, evtLatch=0, remaining=[88ed2a8c-c0b5-4b93-b3e4-529d00d5b118, 81757f48-d3e7-466d-9058-8edc84496f4f, 6727f535-2e69-4520-a1e0-8b2a2380134d], 
srvNodes=[
    TcpDiscoveryNode [id=81757f48-d3e7-466d-9058-8edc84496f4f, addrs=[10.141.180.69, 10.141.26.13, 10.142.225.122, 127.0.0.1], sockAddrs=[/127.0.0.1:47511, /10.141.26.13:47511, nvmbd2bgt130d00.rjil.ril.com/10.141.180.69:47511, /10.142.225.122:47511], discPort=47511, order=1, intOrder=1, lastExchangeTime=1574446951670, loc=false, ver=1.7.0#20160801-sha1:383273e3, isClient=false], 
    TcpDiscoveryNode [id=6727f535-2e69-4520-a1e0-8b2a2380134d, addrs=[10.141.180.69, 10.141.26.13, 10.142.225.122, 127.0.0.1], sockAddrs=[/10.142.225.122:47515, /127.0.0.1:47515, /10.141.26.13:47515, nvmbd2bgt130d00.rjil.ril.com/10.141.180.69:47515], discPort=47515, order=5, intOrder=4, lastExchangeTime=1574446951670, loc=false, ver=1.7.0#20160801-sha1:383273e3, isClient=false], 
    TcpDiscoveryNode [id=88ed2a8c-c0b5-4b93-b3e4-529d00d5b118, addrs=[10.141.180.69, 10.141.26.13, 10.142.225.122, 127.0.0.1], sockAddrs=[/10.142.225.122:47516, /10.141.26.13:47516, /127.0.0.1:47516, nvmbd2bgt130d00.rjil.ril.com/10.141.180.69:47516], discPort=47516, order=8, intOrder=6, lastExchangeTime=1574446951670, loc=false, ver=1.7.0#20160801-sha1:383273e3, isClient=false], 
    TcpDiscoveryNode [id=c54ef27b-049e-466e-a594-3fffb01bd1e3, addrs=[10.141.180.69, 10.141.26.13, 10.142.225.122, 127.0.0.1], sockAddrs=[/10.141.26.13:47512, /127.0.0.1:47512, nvmbd2bgt130d00.rjil.ril.com/10.141.180.69:47512, /10.142.225.122:47512], discPort=47512, order=14, intOrder=9, lastExchangeTime=1574447015048, loc=true, ver=1.7.0#20160801-sha1:383273e3, isClient=false]], super=GridFutureAdapter [resFlag=0, res=null, startTime=1574446955042, endTime=0, ignoreInterrupts=false, state=INIT]]]

代替:

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

我希望它可以帮助其他人。