typescript 类型错误：v.context.$implicit 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43501592/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: v.context.$implicit is not a function
提问by Onur ?nder
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.
我是 Typescript 的新手。已经 3 天了。我想从 Firebase 访问数据。我访问并列出。当我想通过 (Click) ="item ()" 传递到另一个页面时出现错误。我哪里做错了。
data-api.service.ts
数据-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
关于.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
关于.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
数据.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"
}
]
]
aboutpage
关于页面
Click on one of the items
单击其中一项
teampage
团队页面
采纳答案by Suraj Rao
Since TeamsPageis an IonicPage, it is lazyloaded.
由于TeamsPage是 IonicPage，因此它是延迟加载的。
Check IonicPage.
Avoid importing TeamsPagein other pages. In order to push the page,
use the string equivalent of the page.
eg:
检查IonicPage。避免TeamsPage在其他页面中导入。为了推送页面，请使用与页面等效的字符串。例如：
item(){
this.navCtrl.push('TeamsPage');
}
and remove the import.
并删除导入。
Orif you want to use a custom string, set it in decorator in TeamsPage.
或者，如果您想使用自定义字符串，请将其设置在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:
其次，您的函数名称item()似乎与您的 for 循环变量发生冲突item。将其更改为：
<button ion-item *ngFor="let n of names" (click)="item()">
<h2> {{n.name}}</h2>
</button>
回答by Rahul Jograna
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 ..!
您只需更改 HTML 中的方法名称非常简单，因为在 *ngFor 迭代器中您使用了相同的循环名称和方法名称..！
<button ion-item *ngFor="let **item** of names" (click)="**item**()">
<h2> {{item.name}}</h2>
</button>
