我正在尝试显示某个类别中的所有项目。我有一个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个项目没有显示。也许我正在增加页面而不检查是否还有要显示的项目。我不知道如何解决这个问题。
我想如果有一种方法可以判断在分页之前是否存在项目,那么这两个错误都将得到修复。
(我正在改变我的答案,让你知道“缺少物品”的问题。)
来自你的评论:
请克隆
social-login-untested
分支,部署它,去福特,例如你会看到只有1个车展
而你的问题是:
我的代码中可能有两个问题,由于
loadMore
和分页,第一个是上面的错误,第二个是有时最后的2或3个项目没有显示。
所以我克隆了social-login-untested
的GitHub repo分支,并在本地测试了应用程序。
我去了车辆→汽车→福特,并注意到只有一个项目显示,这实际上是从第一页(第1到第100项)的预期,只有一个“福特”项目,其余的在页面上# 2等
这意味着,只有当您向下滚动页面时,其他“福特”项目才会显示 - 并且只有当您可以向下滚动页面时...即document
的高度大于window
的高度。
否则,您将停留在页面#1的结果上,并且永远不会加载页面#2和其他页面。在Chrome上,toggle设备工具栏→选择“响应”并尝试400 x 320
px,如下所示:
在400 x 320
px,您可以向下滚动,这样就可以加载所有“福特”物品。
我能想到如何解决这个问题的一种方法是使用类似这样的逻辑(参见CategoryDetailsPage.loadAds()
中的src/pages/category-details/category-details.ts
):
if ( {DOCUMENT'S HEIGHT} <= {WINDOW'S HEIGHT} ) {
// Loads next page without waiting for the scrolling to occur; but stops
// loading when scrolling starts - for that, the logic is not included.
this.loadMore( infiniteScroll );
} else if ( infiniteScroll ) {
infiniteScroll.complete();
}
..但是(因为我实际上在AngularJS和Ionic中经验较少)你需要自己创建..你可能还想在window
/ document
onscroll
事件中添加一个监听器并在页面滚动上停止loadMore()
。并确保没有(或只是删除/隐藏)重复的项目。
尽管如此,我希望这个“新”答案对你有帮助。 =)
正如我在对您的问题的评论中指出的那样,如有必要,您可以通过标题X-WP-TotalPages
检索总的可用页数。见https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/
正如您在问题中已经提到的,当您尝试在空元素时访问元素时会发生这种情况。无论您在何处尝试访问项目,都可以使用if检查,如下所示,
if(data && data.length > 0){
for (let i = 0; i < data.length; i++) {
}
试试这个(我添加了更多支票)
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 && (data[i].pure_taxonomies.ad_cat || []).length ) {
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 && (data[i].pure_taxonomies.ad_cat || []).length) {
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 && data[i].pure_taxonomies && (data[i].pure_taxonomies.ad_cat || []).length) {
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 && (data[i].pure_taxonomies.ad_cat || []).length) {
if (data[i].pure_taxonomies.ad_cat[0].parent === this.item_category) {
this.items.push(data[i]);
}
}
}
}
}
}
if (infiniteScroll) {
infiniteScroll.complete();
}
});
}