typescript - TypeError: v.context.$implicit ไม่ใช่ฟังก์ชัน

ฉันเพิ่งเริ่มใช้ Typescript ได้ 3 วัน ฉันต้องการเข้าถึงข้อมูลจาก Firebase และฉันเข้าถึงและแสดงรายการแล้ว ฉันได้รับข้อผิดพลาดเมื่อพยายามส่งไปยังหน้าอื่นด้วย (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");


   }


}

เกี่ยวกับ.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"
}
]
]

เกี่ยวกับหน้า

คลิกที่หนึ่งในรายการ

หน้าทีม

คำตอบ #1

เนื่องจาก TeamsPage เป็น IonicPage มันจึงถูกโหลดแบบ lazyloaded

ตรวจสอบ 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>

คำตอบ #2

มันง่ายมาก คุณเพียงแค่ต้องเปลี่ยนชื่อเมธอดของคุณภายใน HTML เพราะในตัววนซ้ำ *ngFor คุณได้ใช้ชื่อลูปและชื่อเมธอดเดียวกัน..!

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