Question

我一直在尝试编写自己的api，然后使用数据填充我的离子应用程序。我测试了API，并在尝试调用API时遇到了CORS错误。我已经添加了ionic.config.json文件的代理来解决这个问题并调用API。离子应用程序不再崩溃，但它现在只显示一个空白页面。以下是我的代码：

全patients.ts：

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';

@Component({
  selector: 'page-all-patients',
  templateUrl: 'all-patients.html',
  providers: [RestService]
})
export class AllPatientsPage {
  public data: any;

  constructor(public navCtrl: NavController, public restService: RestService){
    this.loadPeople();
  }

  loadPeople(){
    this.restService.load()
    .then(data => {
      this.data = data;
    });
  }
}

休息-service.ts：

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

/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class RestService {

  constructor(public http: Http) {
    console.log('Hello RestServiceProvider Provider');
  }

  load() {
  if (this.data) {
    // already loaded data
    return Promise.resolve(this.data);
  }

  // don't have the data yet
  return new Promise(resolve => {
    this.http.get('/api')
      .map(res => res.json())
      .subscribe(data => {
         this.data = data.results;
         resolve(this.data);
       });
  });
}
}

全patients.html：

<ion-navbar *navbar>
  <ion-title>
    All Patient Data
  </ion-title>
</ion-navbar>

<ion-content class="all-patients">
  <ion-list>
    <ion-item *ngFor="let item of data">
      <h2>{{item.firstName}} {{item.lastName}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

我不确定是什么导致了这个问题，但我最好的猜测是html中的数据调用存在某种问题，但即使html代码中的离子导航栏也没有运行，所以我不确定

Answer 1

我可以在您的代码中看到一些问题：

1-在模板中，您正在引用数据，但数据首先是未定义的。你需要用* ngIf来保护你的* ngFor：

<ion-content class="all-patients">
  <ion-list *ngIf="data">
    <ion-item *ngFor="let item of data">
      <h2>{{item.firstName}} {{item.lastName}}</h2>
    </ion-item>
  </ion-list>
  <div *ngIf="!data" >Loading data...</div>
</ion-content>

2-在您的服务中，您正在引用此数据，但您似乎没有在该类中声明数据。

3-在loadPeople（）成功中添加console.log（数据）以确保收到结果

4-最后，如果您仍然收到空白页面，那很可能是因为您的CSS使页面看起来是空白的。检查你的html并查看内容是否确实存在但由于缺少css类而无法看到

离子API数据获取空白屏幕

1 个答案: