I am a beginner with Typescript and it has only been 3 days. I am trying to access data from Firebase and display it in a list. However, I keep encountering an error when trying to navigate to another page using (Click) ="item ()". Can someone point out where I might be going wrong?
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 = 'https://ionic2-9dc0a.firebaseio.com/.json'; // https://ionic2-9dc0a.firebaseio.com
currentphone : any = {};
constructor(private http:Http){
}
getAdress(){
return new Promise(resolve =>{
this.http.get(`${this.url}`)
.subscribe(res => resolve(res.json()))
});
}
About.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {DataApi} from '../../app/shared/shared';
import {Http, HttpModule} from '@angular/http';
import {TeamsPage} from '../teams/teams';
@IonicPage()
@Component({
selector: 'page-about',
templateUrl: 'about.html',
})
export class AboutPage {
names: any;
constructor(public navCtrl: NavController, public navParams: NavParams,
public dataApi:DataApi, public http:Http) {
}
item(){
this.navCtrl.push(TeamsPage);
}
ionViewDidLoad(){
this.dataApi.getAdress().then(data => this.names= data[0]);
console.log("willloaded");
}
}
About.html
<ion-header>
<ion-navbar>
<ion-title>Select Tournament </ion-title>
</ion-navbar>
</ion-header>
<ion-content>
≪ion-list>
<button ion-item *ngFor="let item of names" (click)="item()">
≪h2> {{item.name}}</h2>
</button>
≪/ion-list>
</ion-content>
Data.json
[
[
{
"id": 15,
"name": "Stage Systems",
"image": "stage/1.jpg",
{
"image": "stage/1.jpg"
}
},
{
"id": 16,
"name": "Visual Systems",
"image": "stage1/1.jpg"
},
{
"id": 17,
"name": "Podium Systems",
"image": "stage2/1.jpg"
},
{
"id": 18,
"name": "Table, Chair and Loge Groups",
"image": "stage3/1.jpg"
},
{
"id": 19,
"name": "Tent Systems",
"image": "stage4/1.jpg"
},
{
"id": 20,
"name": "Mobile Generator Services",
"image": "stage5/1.jpg"
},
{
"id": 21,
"name": "Simultaneous(Translation) Systems",
"image": "stage6/1.jpg"
}
]
]
About Page
https://i.sstatic.net/epcu2.png
Click on one of the items
Team Page https://i.sstatic.net/QoVxT.png