代码之家  ›  专栏  ›  技术社区  ›  Lynob

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

  •  9
  • Lynob  · 技术社区  · 6 年前

    我正在尝试显示一个类别中的所有项目。我有一个类别的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

    我想如果有办法在分页之前判断项目是否存在,这两个错误都会被修复。

    3 回复  |  直到 5 年前
        1
  •  2
  •   Sally CJ    6 年前

    (我将我的答案改为让您知道“丢失项目”的问题。)

    根据您的评论:

    social-login-untested 布兰奇,部署它,去福特, 例如,您将看到只有1个车展

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

    你的分支 GitHub repo ,并在本地测试了应用程序。

    在第一页(第1到第100项),只有一个“福特”项 ,其余的在第2页等。

    也就是说,剩下的“福特”产品只有在你 向下滚动 仅在页面上 如果 document 的高度大于 window 的高度。

    否则,您将停留在第1页的结果上,而第2页和其他页面将永远不会被加载。在铬上, 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方面的经验比较少),你需要自己去做。。您可能还想将侦听器添加到 文件 onscroll 事件并停止 loadMore() 在页面上滚动。并确保没有(或只是删除/隐藏)重复项。

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

    附加说明

    当我指着我的 评论 对于您的问题,如果需要,您可以通过标题检索可用的总页数 X-WP-TotalPages https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/

        2
  •  4
  •   Sajeetharan    6 年前

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

    if(data && data.length > 0){
      for (let i = 0; i < data.length; i++) {
    }
    
        3
  •  3
  •   David    6 年前

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

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