Ionic 2 - 从服务中获取数据

Posted

技术标签:

【中文标题】Ionic 2 - 从服务中获取数据【英文标题】:Ionic 2 - Get data from the service 【发布时间】:2017-04-05 23:59:36 【问题描述】:

情况

对不起,如果这是一个基本问题。

在我的 Ionic 2 应用程序中,我有一个 POST 登录请求。它工作正常。有一个带有电子邮件和密码的表格。我将此数据发送到 API,然后我得到相应的用户数据作为响应。

唯一的问题是我在服务中获取了这些数据。

然后如何将这些数据传递给 loginPage 组件?

在控制台中,我可以看到所有正确接收的数据。只是 console.log 在服务内部。

我只需要将数据传递给组件。

代码

LoginPage 组件

makeLogin() 

    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.submitLogin(email, password, this.api_access_key);


服务

submitLogin(email: string, password: string, api_access_key: string) 
       
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', email);
    urlSearchParams.append('password', password);
    urlSearchParams.append('api_access_key', api_access_key);

    let body = urlSearchParams.toString()

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    this.http
        .post(this.loginUrl, body,  headers: headers )
        .map(response => response.json())
        .subscribe(data => 
                    console.log('login API success');
                    console.log(data);
                , error => 
                    console.log(error);
        );

【问题讨论】:

【参考方案1】:

您需要在component 中而不是在service 中使用subscribe

// 组件

makeLogin() 

    var email = this.loginForm.value.email.trim();
    var password = this.loginForm.value.password.trim();

    this.userService.submitLogin(email, password, this.api_access_key).subscribe((res) => 
      console.log(res);
    , (error) => 
      console.log(error);
    );


// 服务

submitLogin(email: string, password: string, api_access_key: string) 
       
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('email', email);
    urlSearchParams.append('password', password);
    urlSearchParams.append('api_access_key', api_access_key);

    let body = urlSearchParams.toString()

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    return this.http
        .post(this.loginUrl, body,  headers: headers )
        .map(response => response.json());

【讨论】:

嗨 Ranakrunal,当我点击 post API 时,我会得到这样的 html 标签的响应 "_body":"\" 所以你能帮帮我吗。

以上是关于Ionic 2 - 从服务中获取数据的主要内容,如果未能解决你的问题,请参考以下文章

在接收推送通知时获取数据 - ionic3

如何从 JSON 获取列表数据值 Ionic 2?

从本地 Json 文件 ionic 3 获取数据 [重复]

Ionic 2 MEAN 应用程序不会在获取请求时返回更新的数据

在 Ionic 中以编程方式从 Branch 链接解码和获取数据

从 InAppBrowser IONIC 5 获取 JSON 数据