28366

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.

<strong>data-api.service.ts</strong>

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

<strong>about.ts</strong>

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

<strong>about.html</strong>

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

<strong>data.json</strong>

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

<strong>aboutpage</strong>

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

Answer1:

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>

Answer2:

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>

Recommend

  • How to define a function in Ionic 2
  • Ionic 3 RSS read with rss2json “Unprocessable Entity”
  • Ionic map loads when i first enter the page but after navigating back it does not load
  • Ionic 2 Login component and Auth service
  • How to setup first time launch of an iOS App
  • Property 'map' does not exist on type 'AngularFireList'
  • @viewChild return undefined
  • How to avoid Tabs on footer when redirecting to next page [duplicate]
  • Creating a Messenger service
  • Is there a way to focus on a dynamically created form on Angular 4/Ionic3?
  • TabBarController: Orienting views in different orientations
  • NServiceBus - NServiceBus.Host as publisher and WPF app as subscriber. How To?
  • Ionic2: Unsubscribe Event to Avoid Duplicate Entries?
  • ionic plugin add phonegap-plugin-push results in a 404 Not Found Error
  • Ionic run android - Internal Error
  • javascript array numerical key resulting in excess “undefined”
  • SearchView WITHOUT ACTIONBAR [duplicate]
  • Can you pass data to a test fixture just like you pass data to test cases?
  • Java inject implementation using TypeLiteral
  • Calling a constructor through reflection in scala 2.10
  • How can I let users share their location in Bot Framework webchat channel?
  • How to resolve permission denied maybe missing internet permission?
  • Why people use prototype in javascript when it is easy to inherit using apply () and call () methods
  • unable to get jsonEncode in magento2
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • Access variable of ScriptContext using Nashorn JavaScript Engine (Java 8)
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • Code in Job's Script Block after Start-Process Does not Execute
  • How can I set a binding to a Combox in a UserControl?
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Create DicomImage from scratch using Dcmtk
  • Typescript - Unable to get 'import' statement to function
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • req.body is undefined - nodejs
  • Updating server-side rendering client-side
  • Updated Ionic CLI but shows previous version (Windows)
  • Symfony2: How to get request parameter
  • Akka Routing: Reply's send to router ends up as dead letters
  • Is there a mandatory requirement to switch app.yaml?
  • Angular 2 constructor injection vs direct access