在html中调用typescript数据用于离子框架-Java 学习之路

我创建了一个简单的应用程序来从离子框架内的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);
      });
  });
}

}

1 回答

0
你读过这个ionic documents吗？

所以基本上，在 home.html 中使用 ngFor 来迭代从服务器收到的数据 .
```
<ion-item *ngFor="let user of users">
    User info :  {{user.User_name}}
 </ion-item>
```
回复于 2024-05-03T00:36:05+08:00

在html中调用typescript数据用于离子框架

1 回答

相关问题