小贝子编程

API 请求数据仅在重新加载时显示?



我正在向 API 端点发出请求，但是最初单击事件页面时，我收到 HTTP 失败错误和一些有关来自 rxjs 的订阅的错误。

下面是最初尝试加载数据的代码。

ngAfterViewInit(){
this.onLoadTable();
}

onLoadTable() {
if(this.authService.getToken() == null){
return;
}

this.processing = true;
this.errorMsg = "";
console.log("in onLoadTable.");
this.getOwnedEvents(this.userId)
.subscribe(
data => {
console.log(data);
this.processing = false;
this.dataSource.data = data;
this.paginator.firstPage();
},
(err) => {
this.processing = false;
var errorReturned = (err.error != undefined && err.error['message'] != undefined) ? err.error['message'] : ""; 
this.errorMsg = "Error while retrieving event list: " + errorReturned;
}
);
}
getOwnedEvents(user_id, retries:number=0) {
console.log(this.userId);
let url = this.apiURL + 'users/' + this.userId + '/get_all_owned_events';
console.log(url);
let headers = new HttpHeaders();
headers  = headers.append('Content-Type', 'application/json');
headers  = headers.append('Authorization', this.authService.getToken());
console.log(this.http.get(url, {headers}));
return this.http.get(url, {headers})
.map(
(data) => {
console.log(data);
return data['payload']['events'];
}
)
.catch(
(error) => {
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
console.log(errMsg);
} else {
errMsg = error.message ? error.message : error.toString();
console.log(errMsg);
return error;
}

}
)
}

单击重新加载按钮时，它会填充数据。该重新加载按钮是像这样调用的，只需调用onLoadEvent()，它只是在上面的代码块中调用onLoadTable。谁能帮助我解决我在这里做错了什么？

ngOnInit() {
this.filterString="";
this.onBackToList();
this.onLoadEvents();
}

onLoadEvents(){
this.eventlist.onLoadTable();
}

这里还有初始加载的错误输出：

Http failure response for (unknown url): 0 Unknown Error
core.js:1671 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:41)
at subscribeToResult (subscribeToResult.js:6)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:40)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)
defaultErrorLogger @ core.js:1671
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1717
next @ core.js:4320
schedulerFn @ core.js:3556
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
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:3540
(anonymous) @ core.js:3847
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3784
onHandleError @ core.js:3847
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
error (async)
customScheduleGlobal @ zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:258
(anonymous) @ zone.js:1831
(anonymous) @ http.js:1628
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:42
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:6
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:70
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:67
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:50
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:42
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:28
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchOperator.call @ catchError.js:17
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../src/app/events/eventlist/eventlist.component.ts.EventlistComponent.onLoadTable @ eventlist.component.ts:135
push../src/app/events/eventmanagement/eventmanagement.component.ts.EventmanagementComponent.onLoadEvents @ eventmanagement.component.ts:50
push../src/app/events/eventmanagement/eventmanagement.component.ts.EventmanagementComponent.ngOnInit @ eventmanagement.component.ts:46
checkAndUpdateDirectiveInline @ core.js:9251
checkAndUpdateNodeInline @ core.js:10515
checkAndUpdateNode @ core.js:10477
debugCheckAndUpdateNode @ core.js:11110
debugCheckDirectivesFn @ core.js:11070
eval @ EventmanagementComponent_Host.ngfactory.js? [sm]:1
debugUpdateDirectives @ core.js:11062
checkAndUpdateView @ core.js:10459
callViewAction @ core.js:10700
execEmbeddedViewsAction @ core.js:10663
checkAndUpdateView @ core.js:10460
callViewAction @ core.js:10700
execComponentViewsAction @ core.js:10642
checkAndUpdateView @ core.js:10465
callViewAction @ core.js:10700
execComponentViewsAction @ core.js:10642
checkAndUpdateView @ core.js:10465
callWithDebugContext @ core.js:11352
debugCheckAndUpdateView @ core.js:11030
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:8846
(anonymous) @ core.js:4582
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4582
(anonymous) @ core.js:4474
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3825
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3739
next @ core.js:4474
schedulerFn @ core.js:3556
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
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:3540
checkStable @ core.js:3794
onHasTask @ core.js:3838
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
Show 68 more frames
eventlist.component.ts:567 Http failure response for (unknown url): 0 Unknown Error
core.js:1671 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:41)
at subscribeToResult (subscribeToResult.js:6)
at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:40)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13)
defaultErrorLogger @ core.js:1671
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1717
next @ core.js:4320
schedulerFn @ core.js:3556
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
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:3540
(anonymous) @ core.js:3847
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3784
onHandleError @ core.js:3847
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:191
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
error (async)
customScheduleGlobal @ zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:258
(anonymous) @ zone.js:1831
(anonymous) @ http.js:1628
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:42
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:6
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:70
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:67
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:50
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:42
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:28
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchOperator.call @ catchError.js:17
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23
push../src/app/events/eventlist/eventlist.component.ts.EventlistComponent.onLoadTable @ eventlist.component.ts:135
push../src/app/events/eventlist/eventlist.component.ts.EventlistComponent.ngAfterViewInit @ eventlist.component.ts:123
callProviderLifecycles @ core.js:9568
callElementProvidersLifecycles @ core.js:9542
callLifecycleHooksChildrenFirst @ core.js:9532
checkAndUpdateView @ core.js:10468
callViewAction @ core.js:10700
execComponentViewsAction @ core.js:10642
checkAndUpdateView @ core.js:10465
callViewAction @ core.js:10700
execEmbeddedViewsAction @ core.js:10663
checkAndUpdateView @ core.js:10460
callViewAction @ core.js:10700
execComponentViewsAction @ core.js:10642
checkAndUpdateView @ core.js:10465
callViewAction @ core.js:10700
execComponentViewsAction @ core.js:10642
checkAndUpdateView @ core.js:10465
callWithDebugContext @ core.js:11352
debugCheckAndUpdateView @ core.js:11030
push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:8846
(anonymous) @ core.js:4582
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4582
(anonymous) @ core.js:4474
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3825
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3739
next @ core.js:4474
schedulerFn @ core.js:3556
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
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:3540
checkStable @ core.js:3794
onHasTask @ core.js:3838
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
Show 66 more frames
prox.restapi.service.ts:295 HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: "INTERNAL SERVER ERROR", url: "http://localhost:5000/users/28110/get_profile_image", ok: false, …}

您不会在"If"捕获块中返回任何内容。

请使用这个：

.catch(
(error) => {
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
console.log(errMsg);
} else {
errMsg = error.message ? error.message : error.toString();
console.log(errMsg);
}
return of(error);
}
)

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium