我已经搜索并完成了一些API调用来显示数据。但是现在当我在浏览器或Android设备上运行它的某些时候它显示,有时它没有显示,这意味着数据尚未在屏幕上加载。
这是我的两个屏幕完整代码,包括API调用:
我的src/provider/authservices.ts
下的api调用代码:
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
let apiUrl = 'http://www.example.com/api/';
@Injectable()
export class AuthService {
data: any;
constructor(public http: Http) {}
categ(cat: any) {
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiUrl+'categories.php', JSON.stringify(cat), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
allresources(allres: any) {
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiUrl+'AllResources.php', JSON.stringify(allres), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
reject(err);
});
});
}
}
接下来是我的schudle.ts
:
this.authService.categ(this.loginData).then((result) => {
this.loading.dismiss();
this.data = result;
if(this.data.status == 1)
{
this.Catdata = this.data.CatgeoryList;
for(let i=0; i<this.Catdata.length; i++) {
//console.log(this.Catdata[i].CategoryName);
}
}
else if(this.data.status == 0) {
}
}, (err) => {
this.loading.dismiss();
});
opndetailpage() {
console.log("button pressed");
//this.navCtrl.push(SpeakerListPage, ResourcePage);
this.navCtrl.push(SpeakerListPage).then(
response => {
console.log('Response ' + response);
},
error => {
console.log('Error: ' + error);
}
).catch(exception => {
console.log('Exception ' + exception);
});
}
我的html
:
<div class="item item-body no-padding" style="border-width: 0px !important;">
<div class="row no-padding" *ngFor="let data of Catdata;let i = index" (click)="opndetailpage()">
<ng-container *ngIf=" i % 2 === 0">
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{Catdata[i].CategoryName}}</span></div>
</div>
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{Catdata[i+1].CategoryName}}</span></div>
</div>
</ng-container>
</div>
</div>
然后我的detail page .ts
:
this.authService.allresources(this.resloginData).then((result) => {
this.loading.dismiss();
this.resdata = result;
if(this.resdata.status == 1)
{
this.resCatdata = this.resdata.SubjectList;
for(let i=0; i<this.resCatdata.length; i++) {
// console.log(this.resCatdata[i].FileName);
}
}
else if(this.resdata.status == 0) {
}
}, (err) => {
this.loading.dismiss();
console.log(err);
});
就是这样。有时如果我也导航到详细信息页面,则某些时间数据不会显示。我是错误地调用API还是需要添加一些加载的数据?