Question

我正在尝试显示类别中的所有项目。我有一个类别的关键字或关键字，可以使用它来标识父类别，获取父类别并使用它来搜索具有相似父类别的所有类别。我有两个与分页有关的错误，这些错误是相关的。

网址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个项目没有显示。也许我在增加页面时没有检查是否仍有要显示的项目。我不知道该如何解决。

我认为，如果有一种方法可以在分页之前确定项目是否存在，那么两个错误都将得到解决。

Answer 1

正如您在问题中已经提到的那样，当您尝试在元素为空时访问元素时会发生这种情况。无论您在哪里尝试访问项目，都可以通过if检查来进行处理，

if(data && data.length > 0){
  for (let i = 0; i < data.length; i++) {
}

Answer 2

尝试一下（我添加了更多支票）

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();
      }
    });
  }

Answer 3

（我正在更改答案，让您知道“缺失的物品”的问题。）

从您的评论中：

请克隆social-login-untested分支，进行部署，转到福特，例如，您会看到只有1辆车显示

以及您的问题：

由于loadMore，我的代码中可能出现两个问题分页，第一个是上面的错误，第二个是有时最后2或3个项目不显示。

因此，我克隆了GitHub repo的social-login-untested分支，并在本地测试了该应用。

我去了Vehicles→Cars→Ford，发现只有一个项目在显示，这与第一页（第1到第100个项目）中的一样，实际上是预期的，只有一个“ Ford”项目，其余的在第2页，等等。

这意味着，只有当您在页面上向下滚动时，其余的“福特”项才可见-并且只有 if 您可以向下滚动页面。即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 / {{1}添加监听器} document事件，并在页面滚动上停止onscroll。并确保没有（或只是删除/隐藏）重复项。

尽管如此，我希望这个“新”答案能对您有所帮助。 =）

附加说明

正如我在评论中指出的那样，如有必要，您可以通过标题loadMore()检索可用的总页数。参见https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/

Ionic InfiniteScroll：TypeError：无法读取未定义的属性“ 0”

3 个答案:

附加说明