为什么嵌套这些可观察对象在 Ionic-Angular 中不起作用？答案

【问题标题】：Why nesting these observables is not working in Ionic-Angular?为什么嵌套这些可观察对象在 Ionic-Angular 中不起作用？
【发布时间】：2021-03-01 09:08:39
【问题描述】：

我正在尝试使用 Observables，但我仍然无法弄清楚为什么这不起作用。如果我在管道外调用它们，所有方法似乎都可以正常工作但是当我以这种方式嵌套它们时，它根本不起作用：

createUserWithEmailAndPassword(email, password): Observable<Session> {
    return from(this.firebaseAuth.createUserWithEmailAndPassword(email, password))
        .pipe(map(v => v.user as unknown as User),
            switchMap(this.userDatabase.createUser),
            map(this.userDatabase.createSession)
        );
}

它会抛出这个错误：

ERROR TypeError: Cannot read property 'post' of undefined

at SwitchMapSubscriber.create (database-core.service.ts:57)
at SwitchMapSubscriber.createUser [as project] (database-user.service.ts:28)
at SwitchMapSubscriber._next (switchMap.js:30)
at SwitchMapSubscriber.next (Subscriber.js:49)
at MapSubscriber._next (map.js:35)
at MapSubscriber.next (Subscriber.js:49)
at subscribeToPromise.js:5
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Object.onInvoke (core.js:27437)
at ZoneDelegate.invoke (zone-evergreen.js:363)

数据库用户：

createUser(user: User): Observable<User> {
    return super.create(this.DB_URL, user) //<--- line 28
        .pipe(map(v => v as unknown as User));
}

createSession(user: User): Session {
    const newSession: Session = {
        firstLogin: false,
        id: user.id
    };
    this.angularFirestore.collection('session').doc(user.uid).set(newSession)
        .catch(e => {
            throw new Error(e);
        });
    return newSession;
}

在数据库核心中：

constructor(
    private globalService: GlobalService,
    protected httpClient: HttpClient
) {}
// (...)
protected create(url: string, data: any): Observable<JsonObject> {
    return this.httpClient.post<JsonObject>(url, data, this.globalService.getHttpOptions()) //<-- lines 57
        .pipe(catchError(DatabaseCoreService.handleError)); 
}

订阅 observable：

createUser(email, password) {
    this.authService.createUserWithEmailAndPassword(email, password).subscribe();
}

应用模块：

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        HttpClientModule
    ],
    // (...)

【问题讨论】：

标签： angular typescript ionic-framework rxjs rxjs-observables

【解决方案1】：

问题

我相信问题出现在您的super 类中，其中http 似乎是undefined。

见下文Error reproduction on stackblitz

在上面我有两个类

MySuperClass

export class MyClass {
  constructor(private htttp: HttpClient) {

  }
  create = user => this.htttp.post('some URL', user)

}

我的组件类

export class AppComponent extends MyClass implements OnInit {
  constructor(http: HttpClient) {
    super(http);
  }
  ngOnInit() {
    this.create({ name: "User" }).subscribe({
      next: console.log
    });
  }
}

在上面抛出了错误。这应该是您面临的错误

解决方案

要解决这个问题，可以在super类的constructor中设置http的值

See this demo

在此我已将http 属性传递给super 类并设置它

MySuperClass

import { HttpClient } from "@angular/common/http";

export class MyClass {
  http: HttpClient;
  constructor(_htttp) {
    this.http = _htttp;
  }
  create = user => this.http.post("some URL", user);
}

我的组件类

export class AppComponent extends MyClass implements OnInit {
  constructor(http: HttpClient) {
    super(http);
  }

  ngOnInit() {
    this.create({ name: "User" }).subscribe({
      next: console.log
    });
  }
}

以上解决，问题。检查这是否是您的代码中的问题

【讨论】：