Question

我在Laravel中制作了一个api来显示某些项目。完全可以工作。

现在我正在尝试在我的Ionic App中显示这些项目我已经测试过使用外部API来显示项目，这似乎可行。还测试了与我自己的api的连接，它们彼此建立了连接。

我唯一想念的就是如何遍历数据并显示它。

Home.ts：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestProvider } from '../../providers/rest/rest';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  tickets: any;
  constructor(public navCtrl: NavController, public restProvider: RestProvider) {
    this.getUsers();
  }
  getUsers(){
    this.restProvider.getUsers()
    .then(data => {
    this.tickets = Array.of(data);
    console.log(this.tickets);
    });
    }
}

和我的显示页面：

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

<ion-content>
  <ion-list inset>
  <ion-item *ngFor="let ticket of tickets">
    <h1>{{ticket.requested_by}}</h1>
  </ion-item>
  </ion-list>
  </ion-content>

rest.ts：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the RestProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestProvider {
  apiUrl = '127.0.0.1:8000';
  constructor(public http: HttpClient) {
    console.log('Hello RestProvider Provider');
  }
  getUsers() {
    return new Promise(resolve => {
    this.http.get(this.apiUrl+'/api/posts').subscribe(data => {
    resolve(data);}, 
    err => {
    console.log(err);
      });
    });
  }

离子显示API请求数据

0 个答案: