第一次在stackoverflow中提问。 我的ionic2应用程序遇到了问题。我可以在控制台ald中获得json,但是当我希望它在我的应用程序中显示时,news.html遇到了一些问题。
提供商/新闻data.ts
@Injectable()
export class NewsDataProvider {
data:any;
constructor(public http: Http) {
}
getUsers() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get('url').map(res => res.json()).subscribe(data => {
this.data = data;
resolve(this.data);
console.log('success');
});
});
}
}
news.ts
@IonicPage()
@Component({
selector: 'page-news',
templateUrl: 'news.html',
})
export class NewsPage {
users:any;
constructor(public navCtrl: NavController, public navParams: NavParams,public newsData:NewsDataProvider){
this.getUsers();
}
getUsers() {
this.newsData.getUsers().then(data => {
this.users = data;
});
}
}
news.html
<ion-header>
<ion-navbar color="danger" no-border-bottom>
<button ion-button menuToggle>
<ion-icon name="ios-contact"></ion-icon>
</button>
<ion-title></ion-title>
</ion-navbar>
<ion-toolbar no-border-top>
<ion-searchbar color="danger"
[(ngModel)]="queryText"
(ionInput)="updateSchedule()"
placeholder="Search">
</ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-item *ngFor="let user of users">
{{user.title}}
</ion-item>
</ion-content>
控制台节目
错误错误:无法找到不同的支持对象'[object Object]' 类型'对象'。 NgFor仅支持绑定到Iterables,例如 阵列。 在NgForOf.ngOnChanges(common.es5.js:1689) at checkAndUpdateDirectiveInline(core.es5.js:10790) at checkAndUpdateNodeInline(core.es5.js:12216) at checkAndUpdateNode(core.es5.js:12155) 在debugCheckAndUpdateNode(core.es5.js:12858) 在debugCheckDirectivesFn(core.es5.js:12799) 在Object.eval [as updateDirectives](NewsPage.html:22) at Object.debugUpdateDirectives [as updateDirectives](core.es5.js:12784) 在checkAndUpdateView(core.es5.js:12122) 在callViewAction(core.es5.js:12485)
但可以在网络中获取数据
答案 0 :(得分:1)
此错误表示您在object
上使用ngFor
,但ngFor
仅支持Array
等可重复使用。
我从您提供的url
进行测试,并发现您应该从res.json().data
检索数组(应该是您想要在ngFor
使用的数据{1}})。请参考以下更改。
this.http.get('http://bravonet.my/ct3/api/news?api_key=123').map(res => res.json().data).subscribe(data => {
this.data = data;
resolve(this.data);
console.log('success');
});
和 Plunker Demo (不会通过Chrome确认这一点,因为它在使用https 时会默认阻止http请求)。
答案 1 :(得分:0)
您已经在功能中订阅了http请求。无需再次创建承诺并返回。只需从news-data.ts
返回http请求,然后从news.ts
文件
getUsers() {
if (this.data) {
return Promise.resolve(this.data);
}
return this.http.get('http://bravonet.my/ct3/api/news?api_key=123').map(res => res.json())
}
现在就像这样抓住它
getUsers() {
this.newsData.getUsers().subscribe(data => {
this.users = data;
});
}