تایپاسکریپت - TypeError: v.context.$implicit یک تابع نیست

من تازه با تایپاسکریپت آشنا شدهام. سه روز است. میخواهم به دادهها از فایربیس دسترسی پیدا کنم. و من دسترسی پیدا کردم و لیست کردم. وقتی میخواهم با (Click) ="item()" به صفحه دیگری منتقل کنم، خطا میگیرم. کجا اشتباه میکنم.

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

درباره صفحه

روی یکی از موارد کلیک کنید

صفحه تیم

پاسخ شماره ۱

از آنجایی که TeamsPage یک صفحهی Ionic است، به صورت تنبل بارگذاری میشود.

صفحه IonicPage را بررسی کنید. از وارد کردن TeamsPage در صفحات دیگر خودداری کنید. برای هدایت به صفحه، از معادل رشتهای صفحه استفاده کنید، مثلا:

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

و واردکردن را حذف کنید.

یا اگر میخواهید از یک رشتهٔ سفارشی استفاده کنید، آن را در دیکوراتور در TeamsPage تنظیم کنید.

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

و در حالی که صفحه را فشار میدهید،

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

ثانیاً، نام تابع شما item() به نظر میرسد با متغیر حلقه for شما item تداخل دارد. آن را به این صورت تغییر دهید:

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

پاسخ شماره ۲

خیلی راحت است، شما فقط نیاز دارید نام متد خود را داخل HTML تغییر دهید زیرا در حلقه *ngFor خود از همان نام حلقه و نام متد استفاده کردهاید..!

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