在 Ionic2 中找不到 DataApi 数据(未在 HTML 中显示)

Question

我正在为 Ionic 2 开发一个应用程序。我正在从 JSON 拍摄照片，并在控制台中列出数据.log.但是它们不会以 HTML 显示。错误 (GET http://ukopuz.com/[对象%20对象] 404 (未找到( (我哪里出错了？

data-api.service.ts

import {Injectable} from '@angular/core';
import {Http,Response} from '@angular/http';

 @Injectable()
 export class DataApi {

 private url = 'http://ukopuz.com/api/2'; 
 constructor(private http:Http){
 }
  getReferenceData(){
    return new Promise(resolve =>{
     this.http.get(`${this.url}`) 
    .subscribe(res => resolve(res.json()))
  });
 }
}

参考资料.html

  <ion-content class="content">
    <ion-grid>
      <ion-row *ngFor="let ref of reference">
         <ion-col col-4 >
           <img src="http://ukopuz.com/{{ref}}" >
         </ion-col>
     </ion-row>
   </ion-grid>
</ion-content>

参考资料

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams,ModalController } from 
'ionic-angular';
 import {DataApi} from '../../app/dataapi/data-api.service';
 import {Http, HttpModule} from '@angular/http';
 import {ModalPage} from '../modal/modal';
 @IonicPage()
 @Component({
  selector: 'page-references',
  templateUrl: 'references.html',
  })
  export class ReferencesPage {
  reference : any;
  constructor(public navCtrl: NavController, public navParams: 
  NavParams,public dataApi:DataApi,
   public http:HttpModule,public modalCtrl:ModalController) {
  }
  ionViewDidLoad() {
   console.log('ionViewDidLoad ReferencesPage');
    this.dataApi.getReferenceData().then(data =>
     this.reference = data);
      console.log("data:"+ this.reference );
     console.log("viewload");
}

 }  

data.json

[
 {
   "3": "/img/ref/adana.png",
   "4": "/img/ref/ajans.png",
   "5": "/img/ref/akp.jpg",
   "6": "/img/ref/akp.png",
   "7": "/img/ref/akpgenclik.png",
   "8": "/img/ref/ankara.png",
   "9": "/img/ref/arnavut.png",
   "10": "/img/ref/aydin.png"
   }
 ]

Answer 1

我已经检查了您从 API 返回的 json，因此它没有返回任何数据，因此您在.html页面中得到了任何响应

检查 API 页面