我有一个自动填充字段,该字段应从服务调用中获取数据,该服务调用运行良好,并且我可以将数据分配给该类中的我的自动填充变量,但是自动填充功能不会在应用程序上显示任何选项。
HTML
<mat-form-field id="numberField" appearance="outline">
<mat-label>Enter a Number</mat-label>
<input matInput placeholder="Enter Number" [formControl]="numberControl" [matAutocomplete]="auto" required>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let number of (filteredNumbers$ | async)" [value]="number">{{number}}</mat-option>
</mat-autocomplete>
</mat-form-field>
TS
filteredNumbers$: Observable<Array<Number>> = null;
numberControl = new FormControl();
this.filteredNumbers$ = this.numberControl.valueChanges.pipe(
debounceTime(300),
switchMap(value => {
return this.getNumbers(value);
})
)
getNumbers(filterValue: string) :Observable<Array<Number>> {
return this.numberService.getNumbers(filterValue)
}
服务
getNumbers(payload: string) {
return this.http
.post<Array<Number>>(`${this.baseUrl}/api/numbers/allNumbers`, payload );
}
错误
ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:41)
at subscribeToResult (subscribeToResult.js:11)
at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:51)
at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:41)
at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
at DebounceTimeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/debounceTime.js.DebounceTimeSubscriber.debouncedNext (debounceTime.js:48)
at AsyncAction.dispatchNext (debounceTime.js:62)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction._execute (AsyncAction.js:64)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction.execute (AsyncAction.js:52)
at AsyncScheduler.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js.AsyncScheduler.flush (AsyncScheduler.js:43)
defaultErrorLogger @ core.js:1673
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719
next @ core.js:4311
schedulerFn @ core.js:3551
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:194
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
(anonymous) @ core.js:3842
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779
onHandleError @ core.js:3842
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:198
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
ZoneTask.invoke @ zone.js:487
timer @ zone.js:2281
setInterval (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.(anonymous function) @ zone.js:1569
push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction.requestAsyncId @ AsyncAction.js:35
push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction.schedule @ AsyncAction.js:28
push../node_modules/rxjs/_esm5/internal/Scheduler.js.Scheduler.schedule @ Scheduler.js:13
push../node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js.AsyncScheduler.schedule @ AsyncScheduler.js:31
push../node_modules/rxjs/_esm5/internal/operators/debounceTime.js.DebounceTimeSubscriber._next @ debounceTime.js:36
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
schedulerFn @ core.js:3551
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:194
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535
push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity @ forms.js:2493
push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue @ forms.js:2828
updateControl @ forms.js:1742
(anonymous) @ forms.js:1727
push../node_modules/@angular/material/esm5/autocomplete.es5.js.MatAutocompleteTrigger._handleInput @ autocomplete.es5.js:738
(anonymous) @ ReplaceNumberComponent.html:112
handleEvent @ core.js:10251
callWithDebugContext @ core.js:11344
debugHandleEvent @ core.js:11047
dispatchEvent @ core.js:7710
(anonymous) @ core.js:8154
(anonymous) @ platform-browser.js:988
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
我已根据一些建议更改了代码并得到了新的错误。