イオンフレームワークのhtml内でtypescriptデータを呼び出す

Question

イオンフレームワーク内のphpmyadminデータベースからWebサービスリクエストを呼び出す簡単なアプリケーションを作成しました。私はコンソールに要求jsonデータを正常に表示していますが、問題を表示しています。イムは、まだ新しい角度にどのように私はhome.html感謝

home.html

<ion-header> 
    <ion-navbar> 
    <ion-title> 
     Ionic Blank 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    <h2>User List</h2> 
    <ion-list> 
    <ion-item > 
     //what should i do here ? 
    </ion-item > 
    </ion-list> 
</ion-content> 

home.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import {RestapiServiceProvider} from '../../providers/restapi-service/restapi-service'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

users: any; 

constructor(public navCtrl: NavController, public restapiService: RestapiServiceProvider) { 
    this.getUsers(); 
} 

getUsers() { 
    this.restapiService.getUsers() 
    .then(data => { 
    this.users = data; 
    console.log(this.users); 
    console.log(this.users.User_name); 
    }); 
} 

} 

サービスTSファイル

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

/* 
    Generated class for the RestapiServiceProvider provider. 

    See https://angular.io/guide/dependency-injection for more info on providers 
    and Angular DI. 
*/ 
@Injectable() 
export class RestapiServiceProvider { 
    data:any[]; 
    apiUrl = 'http://127.0.0.1/AngularJS/serviceRequest.php'; 

    constructor(public http: Http) { 

    console.log('Hello RestapiServiceProvider Provider'); 
    } 

    getUsers() { 
    if (this.data) { 
    return Promise.resolve(this.data); 
    } 

    return new Promise(resolve => { 
    this.http.get(this.apiUrl+'?User_id=1') 
     .map(res => res.json()) 
     .subscribe(data => { 
     this.data = data; 
     resolve(this.data); 
     }); 
    }); 
} 

} 

でデータを表示すると仮定しています

Answer 1

あなたはこれをお読みですか？ionic documents？

したがって、基本的にはhome.htmlでngForを使用して、サーバーから受け取ったデータを繰り返し処理します。

<ion-item *ngFor="let user of users"> 
    User info : {{user.User_name}} 
</ion-item>