テキストファイルを含むURLを呼び出して文字列に変換し、イオン2で表示するにはどうすればよいですか？

Question

私がしたいのは、テキスト形式のデータを持つURLを呼び出し、それを文字列変数に変換して、ionc 2アプリのメッセージやトーストとして出力することです。 これまでのところ、私のアプリケーションはボタンを表示しますが、setMessage（）関数をアクティブにするためにそれをクリックすると、何も表示されません。

これまでのところ、私のコードはこれに似ています。

これは私のabout.html

<ion-header> 
    <ion-navbar primary> 
    <ion-title> 
     Sismos 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding class="about"> 
<button (click)="setMessage()"> Button</button> 

</ion-content> 

ですこれは私のabout.tsあなたは、文字列を返すが、それを何もしていない

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import {Http} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import { Injectable } from '@angular/core'; 


//La libreria de abajo la importé para conectarme al Catalogo de Sismos 
// el link es http://www.prsn.uprm.edu/Data/prsn/EarlyWarning/Catalogue.txt 
//import {Http} from '@angular/http'; 



@Component({ 
    templateUrl: 'build/pages/about/about.html' 
}) 
export class AboutPage { 

          message: any; 
          // items: any; 
                 constructor(public navCtrl: NavController, private http: Http) 
          {  
           // this.items = []; 
          } 

    setMessage() { 
                let URL_Data = this.http.get('http://www.prsn.uprm.edu/Data/prsn/EarlyWarning/Catalogue.txt'); 
           let message = URL_Data.toString(); 
                return message; 
              }    

         } 

Answer 1

ファイルです。 messageを設定していますが、ページに表示していません。

htmlファイルに変数を設定してみてください。あなた.TSで<p>{{message}}</p>（使用している場合、これはあなたのメッセージ、message:string = "no message available";を初期化することを忘れないでください）

は、私はHTMLで

{{メッセージ}}

が、文字列のウォン」を追加

...//imports, component decorator 

export class AboutPage{ 
    message:string = "no message yet"; 

    ..... //constructor etc. 

    setMessage(){ 
    this.http.get("url").subscribe(response => { 

     this.message = response.toString(); 

     //asynchronous method converting the returned Observable 
     //(http.get returns Observable) and setting it to the message property. 
    }); 
    //note that, code here will be executed BEFORE the subscribe method (asynchronous) 
    //so make sure everything you need to do with the message or response is in the subscribe() 
    } 


}