【发布时间】：2019-02-05 22:39:35
【问题描述】：
我正在尝试显示一个类别中的所有项目。我有一个类别的 slug 或关键字，我可以用它来识别父类别，我得到父类别并用它来搜索所有具有相似父类别的类别。我有两个与分页相关的错误，这些错误是相关的。
网址ads_url:https://jokerleb.com/wp-json/wp/v2/ads?per_page=100&&page=。例如page=1
服务
getAds(page): Observable<any[]> {
return this.http.get(this.api_url + page)
.flatMap((ads: any[]) => {
if (ads.length > 0) {
return Observable.forkJoin(
ads.map((ad: any) => {
return this.http.get(this.ads_thumb_url + ad.id)
.map((res: any) => {
let media: any = res;
ad.media = media;
return ad;
});
})
);
}
return Observable.of([]);
});
}
ts
constructor(public navCtrl: NavController, public navParams: NavParams, public renderer: Renderer, public zone: NgZone, public adsProvider: AdsProvider) {
this.category = this.navParams.get('category');
this.loadAds();
}
loadAds(infiniteScroll?) {
this.adsProvider.getAds(this.page).subscribe((data: any) => {
if (!this.category.main) {
if (this.category.slug) {
for (let i = 0; i < data.length; i++) {
if (data[i] !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].slug.trim().toLowerCase() === this.category.slug.trim().toLowerCase()) {
this.item_category = data[i].pure_taxonomies.ad_cat[0].term_id;
break;
}
}
}
if (this.item_category !== undefined) {
for (let i = 0; i < data.length; i++) {
if (data[i].pure_taxonomies !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].term_id === this.item_category ||
data[i].pure_taxonomies.ad_cat[0].slug.trim().toLowerCase() === this.category.slug.trim().toLowerCase()) {
this.items.push(data[i]);
}
}
}
}
}
} else {
if (this.category.main === 2) {
for (let i = 0; i < data.length; i++) {
if (data[i] !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].slug.trim().toLowerCase() === this.category.slug.trim().toLowerCase()) {
this.item_category = data[i].pure_taxonomies.ad_cat[0].parent;
break;
}
}
}
if (this.item_category !== undefined) {
for (let i = 0; i < data.length; i++) {
if (data[i].pure_taxonomies !== undefined) {
if (data[i].pure_taxonomies.ad_cat[0].parent === this.item_category) {
this.items.push(data[i]);
}
}
}
}
}
}
if (infiniteScroll) {
infiniteScroll.complete();
}
});
}
loadMore(infiniteScroll) {
this.page++;
this.loadAds(infiniteScroll);
}
html
<ion-content fullscreen class="home-content" [ngSwitch]="tab">
<div *ngIf="items.length>0; then thenTemplateName else elseTemplateName">
</div>
<ng-template #thenTemplateName>
<div class="all-lists">
<div class="all-category" *ngSwitchCase="1">
<ion-card class="category-card" *ngFor="let item of items" (click)="onShowItemDetail(item);">
<span *ngIf="item.media.length">
<img src="{{item.media[item.media.length-1].media_details.sizes.medium.source_url}}" />
</span>
<div class="card-title" text-uppercase>
<h4 color="secondary">{{item?.title.rendered}}</h4>
</div>
</ion-card>
</div>
</div>
<ion-infinite-scroll (ionInfinite)="loadMore($event)" loadingSpinner="bubbles">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ng-template>
<ng-template #elseTemplateName>
<div class="all-lists">
<div class="all-category" *ngSwitchCase="1">
<ion-card text-center>
<ion-card-header>
This Category is empty
</ion-card-header>
<ion-card-content>
This Category is empty
</ion-card-content>
</ion-card>
</div>
</div>
</ng-template>
</ion-content>
有时我收到TypeError: Cannot read property '0' of undefined，如果找不到项目，我不会收到错误消息，如果我向下滚动太多会发生错误，loadMore() 函数被调用，它什么也没找到，我收到错误消息。
由于loadMore 和分页，我的代码中可能有两个问题，第一个是上面的错误，第二个是有时最后 2 或 3 项不显示。也许我正在增加页面而不检查是否还有要显示的项目。我不知道如何解决这个问题。
我认为如果有办法在分页之前判断项目是否存在，这两个错误都会得到修复。
【问题讨论】：
-
我的回答对您有帮助吗？如果您将我的
loadAds()代码与您的代码进行比较，我实际上只是做了一些小的调整。告诉我。 -
@SallyCJ 你的回答很好，但它加载的广告没有我的代码那么多，我试图找出原因，也许是你的代码，也许是服务器，也许是我的代码，也许我犯了一个逻辑错误，试图了解发生了什么
-
你能用你使用的所有代码在 StackBlitz 上创建一个演示吗？或者我们可以在其他地方实际测试您的应用？
-
@SallyCJ 我尝试将项目导入stackblitz，但它说他们只导入自动角度项目，如果你可以在本地测试它，这是项目，你会看到有些项目不像福特那样显示，只有一辆福特出现github.com/elieobeid7/jokerleb/tree/social-login-untested
-
@SallyCJ 请克隆
social-login-untested分支，部署它，去福特，例如你会看到只有1个车展，现在部署的分支是master分支
标签： angular ionic-framework ionic3