TypeError: v.context.$implicit is not a function

I'm new to Typescript.It has been 3 days.I want to access the data from Firebase.And I access and list. I get an error when I want to pass to another page with (Click) ="item ()".Where am I doing wrong.


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


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"); } }


<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>


[ [ { "id": 15, "name": "Sahne Sistemleri", "image": "sahne/1.jpg", { "image": "sahne/1.jpg" } }, { "id": 16, "name": "Görüntü Sistemleri", "image": "sahne1/1.jpg" }, { "id": 17, "name": "Podyum Sistemleri", "image": "sahne2/1.jpg" }, { "id": 18, "name": "Masa, Sandalye ve Loca Grupları", "image": "sahne3/1.jpg" }, { "id": 19, "name": "Çadır Sistemleri", "image": "sahne4/1.jpg" }, { "id": 20, "name": "Mobil Jenaratör Hizmetleri", "image": "sahne5/1.jpg" }, { "id": 21, "name": "Simultane(Çeviri) Sistemleri", "image": "sahne6/1.jpg" } ] ]


<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/epcu2.png" alt="enter image description here">

Click on one of the items

<strong>teampage</strong> <img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/QoVxT.png" alt="enter image description here">


Since TeamsPage is an IonicPage, it is lazyloaded.

Check IonicPage. Avoid importing TeamsPage in other pages. In order to push the page, use the string equivalent of the page. eg:

item(){ this.navCtrl.push('TeamsPage'); }

and remove the import.

<strong>Or</strong> if you want to use a custom string, set it in decorator in TeamsPage.

@IonicPage({ name:'teams-page' })

and while pushing the page,

item(){ this.navCtrl.push('teams-page'); }

Secondly, your function name item() seems to clash with your for loop variable item. Change it to:

<button ion-item *ngFor="let n of names" (click)="item()"> <h2> {{n.name}}</h2> </button>


It's very easy you need to just change your method name inside HTML because in your *ngFor iterator you have used same loop name and method name ..!

<button ion-item *ngFor="let **item** of names" (click)="**item**()"> <h2> {{item.name}}</h2> </button>

人吐槽 人点赞



用户名: 密码:
验证码: 匿名发表


查看评论:TypeError: v.context.$implicit is not a function