TypeError: v.context.$implicit is not a function (Ionic2)


#1

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

data-api.service.ts

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

#2

I’m missing an import before { Component }, but it might got lost in translation. What error are you getting and what are you trying to do? Just move up to TeamsPage or do you want to pass an item with it?


#3

There was a problem copying. :slight_smile: It looks like this in my code (import {Component}).That’s not my problem.
Based on id of listed data.I need to show the images in TeamPage according to the listed data
@luukschoen


#4

Okay, at this moment you aren’t passing any data anyways. But could you still answer the question about what error you’re actually receiving? That would make our lives a much easier when trying to solve your issue. So, where exactly are you receiving this issue v.context.$implicit?


#5
item(){
    this.navCtrl.push(TeamsPage);
  }

I get this error when I click (TypeError: v.context. $ Örtük bir işlev değil (Ionic2)) .And I can not view the TeamPage page


#6

about page

Click on one of the items @luukschoen

team page


#7

Okay. How does your app.module look like?


#8

app.modul

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule } from '@angular/http';
import {DataApi} from './shared/shared';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {AboutPage} from '../pages/about/about';
import {TeamsPage} from '../pages/teams/teams';
import {TeamdetailPage} from '../pages/teamdetail/teamdetail';
import {StandingsPage} from '../pages/standings/standings';
import {TeamHomePage} from '../pages/team-home/team-home';





@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AboutPage,
    TeamsPage,
    TeamdetailPage,
    StandingsPage,
    TeamHomePage
   
    
  
    
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    BrowserModule,
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AboutPage,
    TeamsPage,
    TeamdetailPage,
    StandingsPage,
    TeamHomePage
   

  ],

  providers: [
    StatusBar,
    SplashScreen,
    
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

  
})
export class AppModule {}


#9

Okay, looks good. How does your teampage.html and teampage.ts file look like?


#10

BTW you could remove the outer array from your data.json. Right now you have an array in an array with objects in the later. Or is there a specific reason while you’ve got to arrays in your data?


#11

teampage

<!--
  Generated template for the TeamsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar primary>
    <ion-title>Teams Page</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <ion-list>
             
      <button ion-item *ngFor="let item of teams" (click)="item()">
        {{item.image}}
       
      </button>
     
     </ion-list>

</ion-content>

No I created myself data.json


#12

Okay, and your typescript file? I’m feeling i’m missing something obvious. You could strip the outer array on your data, because it isn’t necessary.


#13

While we’re at it, especially if you’re new to this environment, don’t ever type “new Promise”, and if you see any sample code that does, immediately discard it. Also, don’t use any if there is any way to avoid it. Declare interfaces for your business logic objects and use those.

interface Team {
  id: number;
  name: string;
  image: string;
}

getAdress(): Observable<Team[]> {
  return this.http.get(this.url).map(rsp => rsp.json());
}

If you really insist on using Promises instead of Observables in client code, do it this way:

getAdress(): Promise<Team[]> [
  return this.http.get(this.url)
    .map(rsp => rsp.json())
    .toPromise();
}

This way errors are propagated correctly, and you don’t multiply entities needlessly.


#14
<ion-content>
     <ion-list>    
      <button ion-item   (click)="item()">
        <h2>Test1</h2>
        <h2>Test2</h2>
      </button>
     </ion-list>

</ion-content>

NgFor go to the Teampage when you lift.I enter the data manually. Could it be originated from NgFor


#15

Maybe, but the *ngFor looks fine. It’s probably in your data somewhere (perhaps that unneccesary double array), or the fact that you’re doing this:

this.dataApi.getAdress().then(data => this.names= data[0]);

The proper way to handle your data (since it’s json) is extracting it like this: this.names = data.json();

If you want some good advice, listen to @rapropos. Don’t take a deep dive immediately, take your time to figure out how Typescript and Angular2 actually work. Define those interfaces and return types. Maybe it’s hard in the beginning, but it will make your life a lot less miserable in the future.


#16

I have a sneaking suspicion that this might be being caused by conflicting usage of the eager/lazy navigation. Try losing the import of TeamsPagein AboutPage and change the push() call’s argument to a string: push('TeamsPage').


#17

I solved my problem.I just need to change the function name.I’m really careless.
Loop name and function name overlap .For your help, thank you.

<button ion-item *ngFor="let item of teams" (click)="item()">
        {{item.image}}
       
      </button>
<button ion-item *ngFor="let item of teams" (click)="nextpage()">
        {{item.image}}
       
      </button>

#18

Guess we were both wrong in our suspicions. Thought the same thing. but since he wasn’t lazy loading anything according to the app.module I dropped that thought.

Good to know @10ur10der, i haven’t ever encountered that before.


#19

same here… thank you so much