I’m taking pictures from Json.I list the data in the Console.log.but not displayed in HTML.
Where do i make mistakes.
data-api.service.ts
import {Injectable} from '@angular/core';
import {Http,Response} from '@angular/http';
import 'rxjs';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class DataApi {
private url = 'http://ukopuz.com/api/5';
private url1 = 'http://ukopuz.com/api/2'; // https://ionic2-9dc0a.firebaseio.com
currentTourney : any = {};
private tourneyData = {};
constructor(private http:Http){
}
getHomeSlide(){
return new Promise(resolve =>{
this.http.get(`${this.url}`)
.subscribe(res => resolve(res.json()))
});
}
getReferenceData(){
return new Promise(resolve =>{
this.http.get(`${this.url1}`)
.subscribe(res => resolve(res.json()))
});
}
}
references.html
<!--
Generated template for the ReferencesPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header class="header">
<ion-row>
<ion-col col-1 class="back">
<img src="assets/images/noun_884732_cc.png" (click)="back()" >
</ion-col>
<ion-col col-10 class="ukopuz">
<img src="assets/images/UKOPUZ.png" (click)="kopuz()">
</ion-col>
<ion-col col-1 class="menu">
<img src="assets/images/menu.png" (click)="menu()">
</ion-col>
</ion-row>
</ion-header>
<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>
refenrences.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';
/**
* Generated class for the ReferencesPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@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");
}
}