Ionic2中找不到（不顯示在Html中）的DataApi數據

我正在開發Ionic 2的應用程序。我從JSON拍攝照片，並將數據列在console.log中。但是它們沒有顯示在HTML.Error（GET http://ukopuz.com/[object%20Object] 404（Not Found））我哪裏錯了？Ionic2中找不到（不顯示在Html中）的DataApi數據

數據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())) 
    }); 
} 

}

的reference.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>

reference.ts

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" 
    } 
]

來源

2017-05-10 Onur Önder

嘗試用''。注意[和]在src屬性中。 – sebaferreras

不幸的是，沒有工作錯誤（GET http://ukopuz.com/[object%20Object] 404（未找到）） –

我已經檢查從API，它不返回任何數據的返回JSON由於這個你得到你的.html頁面

任何迴應檢查API頁面

來源

2017-05-10 16:42:25

感謝您的興趣。我使用API Ionic1沒有任何問題。數據顯示。我有Ionic2的問題。 –

Ionic2中找不到（不顯示在Html中）的DataApi數據

回答

相關問題