API请求数据仅在重新加载时显示？答案

【问题标题】：API request data only shows when reloading?API请求数据仅在重新加载时显示？
【发布时间】：2021-06-16 00:23:28
【问题描述】：

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

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

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, …}

【问题讨论】：

看来该错误源于在您的 getOwnedEvents 函数中返回不可观察的数据。你试过 return of(data['payload']['events']);并返回（错误）；此外，您的 catch 中的 if 语句没有返回值。
如果我添加了关于 MatTableDataSource.push 的另一个错误，并且我也无法使用重新加载按钮填充数据。

标签： javascript angular typescript rxjs

【解决方案1】：

你没有在'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);
        }
      )

【讨论】：