调用Angular2服务时出现错误：“在类型“Subscription”上不存在属性“then”。

Question

我正在尝试从我的login.ts文件中调用服务，但是一直收到不同的错误。以下是我的代码：

login.ts

import { Component } from '@angular/core';
import { Auth, User } from '@ionic/cloud-angular';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { TabsPage } from '../tabs/tabs';
import { AuthService } from '../../services/auth/auth.service';
import {Observable} from 'rxjs/Rx';


@Component({
  templateUrl: 'login.html'
})

export class LoginPage {
    authType: string = "login";
    error: string;
    storage: Storage = new Storage();

  constructor(public auth: Auth, public user: User, public navCtrl: NavController, public authService: AuthService) {}

  facebookLogin() {
    this.auth.login('facebook').then((success) => {
        this.authService.signup(this.user.social.facebook).then((success) => {

        });
    });

  }
}

auth.service.ts

import { Storage } from '@ionic/storage';
import { AuthHttp, JwtHelper, tokenNotExpired } from 'angular2-jwt';
import { Injectable, NgZone } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { Http, Headers } from 'angular2/http';

@Injectable()
export class AuthService {

  jwtHelper: JwtHelper = new JwtHelper();
  // contentHeader = new Headers({"Content-Type": "application/json"});
  storage: Storage = new Storage();
  refreshSubscription: any;
  user: Object;
  zoneImpl: NgZone;
  idToken: string;
  error: string;

  constructor(private authHttp: AuthHttp, zone: NgZone) {
    this.zoneImpl = zone;
    // Check if there is a profile saved in local storage
    this.storage.get('profile').then(profile => {
      this.user = JSON.parse(profile);
    }).catch(error => {
      console.log(error);
    });

    this.storage.get('id_token').then(token => {
      this.idToken = token;
    });
  }

  public authenticated() {
    return tokenNotExpired('id_token', this.idToken);
  }

  public signup(params) {
    var url = 'http://127:0.0.1:3000/api/v1/register';
    return this.authHttp.post(url, JSON.stringify(params))
        .map(res => res.json())
        .subscribe(
          data => {this.storage.set('id_token', data.token)},
          err => this.error = err
        );
  }
}

基本上，我想要的是当点击facebookLogin()时，它会跳转到auth.service.ts并获取返回值为singup()方法。但是我一直得到一个Property 'then' does not exist on type 'Subscription'错误。这是什么意思，我该怎么解决？

- Kingsley Simon

---

我觉得你的auth.login返回的是一个可观察对象而不是一个承诺。 - John Baird

Answer 1

将订阅(subscribe)更改为toPromise()（不要忘记导入toPromise）

  public signup(params) {
    var url = 'http://127:0.0.1:3000/api/v1/register';
    return this.authHttp.post(url, JSON.stringify(params))
        .map(res => res.json())
        .toPromise(
          data => {this.storage.set('id_token', data.token)},
        );
  }

或者使用.map()，然后在调用站点上使用subscribe()而不是then()。

 public signup(params) {
    var url = 'http://127:0.0.1:3000/api/v1/register';
    return this.authHttp.post(url, JSON.stringify(params))
        .map(res => {
          let data = res.json();
          this.storage.set('id_token', data.token);
          return data;
        });
  }

  facebookLogin() {
    this.auth.login('facebook').then((success) => {
        this.authService.signup(this.user.social.facebook).subscribe((success) => {

        });
    });

  }

- Günter Zöchbauer

---

你的解决方案是有效的，但我能知道为什么我的方法不对吗？我还在努力理解Angular2。 - Kingsley Simon

.then() 可用于 Promise，但 signup 返回的是一个 Observable。toPromise 从 Observable 创建一个 Promise，这使得 then() 起作用，或者（我的第二种方法）你可以坚持使用 Observable 并使用适用于 observables 的操作符，如 subscribe() 和 map()。 - Günter Zöchbauer

我的代码出现了一些错误（第一个例子中，我在 toPromise(...) 中删除了 error ... 行，在第二个例子中，我在 map(...) 中添加了 return data;，否则订阅者可能不会收到任何数据（或者是 this.storage.set(...) 返回的内容）。 - Günter Zöchbauer