我正在使用具有自己的值数组的“材质自动完成(带过滤器)”组件的教程,但是遇到以下错误。
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。
我也试图复制整个示例。.但是我在那遇到了同样的错误。
答案 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";
我希望它可以帮助其他人。