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

问题描述 投票:9回答:3

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

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

angular ionic-framework ionic3
3个回答
2
投票

(我正在改变我的答案,让你知道“缺少物品”的问题。)

来自你的评论:

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

而你的问题是:

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

所以我克隆了social-login-untestedGitHub 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/


6
投票

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

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

3
投票

试试这个(我添加了更多支票)

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();
      }
    });
  }
© www.soinside.com 2019 - 2024. All rights reserved.