首页 > 解决方案 > TypeError:在切换到 Angular 6 和 RxJS 6 后,预期流的无效对象

问题描述

切换到 Angular 6 后,我的异步验证器不再工作了。我使用这样的方法来消除请求:https ://github.com/angular/angular/issues/6895#issuecomment-329464982

我的代码如下所示:

    // in register component
validateNicknameNotTaken(control: AbstractControl): Observable<any> {
    return timer(600)
      .pipe(
        switchMapTo(this.service.isNicknameNotTaken(control.value)),
        map(res => {
          return res ? null : {nicknameTaken: true};
        }),
        take(1)
      );
  }

ngOnInit() {
//...
nickname: ['', [Validators.required, Validators.maxLength(20)], this.validateNicknameNotTaken.bind(this)]
//...
}

// in service
isNicknameNotTaken(nickname: string): Observable<boolean> {
    return this.apollo
      .use('public')
      .query<{ isNicknameNotTaken: boolean }>({
        query: isNicknameNotTakenQuery,
        variables: {
          nickname: nickname
        },
        fetchPolicy: 'no-cache'
      })
      .pipe(
        map(result => result.data.isNicknameNotTaken)
      );
  }

但我收到以下错误:

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

这是完整的日志:

    core.js:1598 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 new ForkJoinSubscriber (forkJoin.js:154)
    at Observable._subscribe (forkJoin.js:135)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:176)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:161)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:51)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:158)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runAsyncValidator (forms.js:2637)
    at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:2606)
defaultErrorLogger @ core.js:1598
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1647
next @ core.js:4727
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
(anonymous) @ core.js:4084
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:4021
onHandleError @ core.js:4084
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
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
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.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
hostReportError @ hostReportError.js:8
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.error @ Subscriber.js:225
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:106
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:106
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:183
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:161
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:51
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:158
push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runAsyncValidator @ forms.js:2637
push../node_modules/@angular/forms/fesm5/forms.js.AbstractControl.updateValueAndValidity @ forms.js:2606
push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue @ forms.js:3044
updateControl @ forms.js:1765
(anonymous) @ forms.js:1750
push../node_modules/@angular/forms/fesm5/forms.js.DefaultValueAccessor._handleInput @ forms.js:784
(anonymous) @ RegisterComponent.html:30
handleEvent @ core.js:11107
callWithDebugContext @ core.js:12204
debugHandleEvent @ core.js:11907
dispatchEvent @ core.js:8561
(anonymous) @ core.js:9005
(anonymous) @ platform-browser.js:1215
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4053
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

如果我使用这样的东西,它会起作用:

return this.service
  .isNicknameNotTaken(control.value)
  .pipe(
    map(res => {
      return res ? null : {nicknameTaken: true};
    }),
  );

我已经迁移了整个应用程序,没有 rxjs-compat。

有什么建议或提示要寻找什么?

最好的问候, 克斯滕

标签: angularrxjsapolloapollo-client

解决方案


推荐阅读