angular - 如何显示我在 ionic 3 API 调用中获得的纯文本值

Question

你好，我正在 ionic 3 中制作一个注册应用程序，我想要实现的是我正在调用 API 并在其上发布数据，然后我得到响应，然后我想在警报中显示它并且然后重定向页面。

这是我的register-user.html

<ion-header>
    <ion-navbar hideBackButton color="title">
        <ion-title text-center>Register</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="content">
        <ion-grid>
            <ion-row>
              <ion-col col-12 ion-fixed>
                <ion-list>
                    <ion-card>
                        <ion-card-header>
                            <ion-img class="logo" alt="logo" [src]="myImage"></ion-img>
                        </ion-card-header>
                        <ion-card-content>
                            <ion-item>
                                <ion-label floating>Full Name</ion-label>
                                <ion-input autocomplete="on" type="text" #name></ion-input>
                            </ion-item>
                            <ion-item>
                                <ion-label floating>Email-ID</ion-label>
                                <ion-input autocomplete="on" type="email" #email></ion-input>
                            </ion-item>
                            <ion-item>
                                <ion-label floating>Mobile Number</ion-label>
                                <ion-input autocomplete="on" type="number" #mobile></ion-input>
                            </ion-item>
                            <ion-item>
                                <ion-label floating>Company Name</ion-label>
                                <ion-input autocomplete="on" type="text" #companyName></ion-input>
                            </ion-item>
                            <ion-item class="mpin">
                                <ion-label text-center floating><b>MPIN</b></ion-label>
                                <ion-input text-center type="password" #mpin></ion-input>
                            </ion-item>
                            <ion-item class="proceedButton">
                                <button ion-button large color="secondary" outline padding strong round (click)="register()">&nbsp;<ion-icon name="arrow-forward"></ion-icon>&nbsp;</button>
                            </ion-item>
                            <ion-item>
                                <button ion-button large color="primary" outline padding block round (click)="home()">Registered? Login Now!</button>
                            </ion-item>
                        </ion-card-content>
                    </ion-card>
                </ion-list>
               </ion-col>
            </ion-row>
        </ion-grid>
</ion-content>

这是我的register-user.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Http } from '@angular/http';

@IonicPage()
@Component({
  selector: 'page-register-user',
  templateUrl: 'register-user.html',
})

export class RegisterUserPage
    {
        @ViewChild('name') name;
        @ViewChild('email') email;
        @ViewChild('mobile') mobile;
        @ViewChild('companyName') companyName;
        @ViewChild('mpin') mpin;

        myImage:string="";
        data:any = {};

        constructor(private http: Http, public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController)
            {
                this.myImage="./assets/logo.png";
                this.data.response = '';
            }

        register()
            {
                var link = 'some url of API';
                var myData = JSON.stringify({name: this.name.value, email: this.email.value, password: this.mpin.value, company: this.companyName.value, contact_no: this.mobile.value});

                this.http.post(link, myData).subscribe(data =>{
                    this.data.response = data["_body"]; //https://stackoverflow.com/questions/39574305/property-body-does-not-exist-on-type-response
                },
                error =>{
                    console.log("Oooops!");
                });

                let alert = this.alertCtrl.create(
                    {
                        title: 'Login Error!',
                        subTitle: this.data.response,
                        buttons: ['OK']
                    });
                alert.present();
            }   

        ionViewDidLoad()
            {
                console.log('ionViewDidLoad RegisterUserPage');
            }
    }

我收到如下回复:{"msg":"success","msg":"user registered"}

我还尝试显示 this.data.response.msg;

仍然没有成功，我也有一个问题，当我第一次点击按钮时，警告窗口没有显示任何值。但是当我第二次点击提交按钮时，它显示了响应值，为什么这样呢？我哪里错了？

Answer 1

您需要像这样解析响应:

this.http.post(link, myData)
    .map(response => response.json()) // <--- Here!
    .subscribe(data => {

        // The "data" property is now the body, 
        // so you can access to it as an object

        this.data.response = data; 

    }