angular - Cómo mostrar el valor de texto plano que obtengo en la llamada API de ionic 3

Hola, estoy haciendo una aplicación de registro en Ionic 3, lo que estoy tratando de lograr es que estoy haciendo una llamada a una API en la que envío datos, luego recibo una respuesta, luego quiero mostrarla en una alerta y luego redirigir la página.

Este es mi 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>

Este es mi 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');
            }
    }

Estoy recibiendo una respuesta como: {"msg":"success","msg":"user registered"}

también intenté mostrar esto.data.response.msg;

todavía no hay éxito, también tuve un problema que cuando hago clic en el botón la primera vez, la ventana de alerta no muestra ningún valor. pero cuando la segunda vez vuelvo a hacer clic en el botón de enviar, muestra el valor de la respuesta. ¿por qué es esto? ¿dónde me equivoco?

Respuesta #1

Necesitas analizar la respuesta, así:

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; 

    }