Ionic infiniteScroll:TypeError:无法读取未定义的属性"0"

Question

我正在尝试显示某个类别中的所有项目.我有一个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个项目没有显示.也许我正在增加页面而不检查是否还有要显示的项目.我不知道如何解决这个问题.

我想如果有一种方法可以判断在分页之前是否存在项目,那么这两个错误都将得到修复.

Answer 1

正如您在问题中已经提到的,当您尝试在空元素时访问元素时会发生这种情况.无论您在何处尝试访问项目,都可以使用if检查,如下所示,

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

Answer 2

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

从你的评论来看：

请克隆social-login-untested分支，部署它，转到福特，例如你会看到只有 1 个车展

还有你的问题：

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

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

我转到“车辆”→“汽车”→“福特”，注意到只有一个项目显示，这实际上与预期一致，因为在第一页（第 1 到第 100 项）上，只有一个“福特”项目，其余的都在第 # 页上。 2 等

这意味着，其余的“福特”项目仅当您在页面上向下滚动时才可见 - 并且仅当您可以向下滚动页面时才可见。即 的document高度大于 的window高度。

否则，您将停留在第 1 页的结果上，并且永远不会加载第 2 页和其他页面。在 Chrome 上，切换设备工具栏 → 选择“响应式”并尝试400 x 320px，如下所示：

在400 x 320px 处，您可以向下滚动，以便加载所有“Ford”项目。

我可以想到如何解决这个问题的一种方法是使用看起来像这样的逻辑（请参阅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()页面滚动。并确保没有（或只是删除/隐藏）重复的项目。

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

附加说明

正如我在对您的问题的评论中指出的那样，如有必要，您可以通过 header 检索可用的总页数X-WP-TotalPages。请参阅https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/