Данные не отображаются на странице с использованием Ionic 4 - PullRequest
Новая
       28

Данные не отображаются на странице с использованием Ionic 4

0 голосов
/ 13 октября 2018

Я новичок в Ionic и пытаюсь разработать приложение для заказа продуктов питания с использованием Ionic 4 и Woocommerce API.

Я могу получить запись из API.Когда я нажимаю на Название категории элемента бокового меню, он получает элементы с идентификатором этой категории.

На странице списка элементов элементы отображаются только при изменении размера браузера Chrome с использованием элемента inspect с рабочего стола на мобильный видили наоборот или происходит какое-то обновление.Мы можем предположить, что информация находится в скрытом состоянии, а при изменении или обновлении она видна пользователю.

То же самое происходит, когда я использую опцию ion-infinite-scroll.

Любая идеякак загрузить данные, когда загрузится новая страница, а также прокрутить страницу ??Пожалуйста, дайте мне знать, если вам нужна дополнительная информация для того же.

Пожалуйста, помогите.

MENU.HTML (Здесь список категорий для заполнения элемента) 

<button menuClose ion-item *ngFor="let cat of category_list" (click) = "openCategoryPage(cat)" menuClose>
       <ion-icon name="md-arrow-round-forward"></ion-icon> {{cat.name}}
</button>

MENU.TS (вызов страницы списка товаров) 

openCategoryPage(category) {
    this.childNavCtrl.setRoot('ItemsListPage',{'category': category});
 }

ITEMLIST.TS 

 export class ItemsListPage {

      @ViewChild(Content) content: Content;
      woocommerce: any;
      products: any[];
      page: number;
      category: any;

      constructor(public navCtrl: NavController, public navParams: NavParams) 
     {
        this.page=1;
        this.category = this.navParams.get('category');
        this.products = [];

        this.woocommerce = WC({
          url:'http://xxxxxxxxxxx.com/xxxx',
          consumerKey:'ck_4c92xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          consumerSecret:'cs_ebd058cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          wpAPI: true,
          version: 'wc/v2',
          queryStringAuth: true
        });

          this.woocommerce.getAsync('products? 
         category='+this.category.id).then((data) =>{

             this.products = JSON.parse(data.body);

          },(err) =>{
             console.log(err);
          });
       }

       loadMoreItems(event){
         this.page++;
          this.woocommerce.getAsync('products? 
          category='+this.category.id+'&page='+this.page).then((data) =>{

            let temp = JSON.parse(data.body);

            this.products = this.products.concat(JSON.parse(data.body));
            event.complete();

            if(temp.length < 10){
               event.enable(false);
            }
           },(err) =>{
             console.log(err);
         });
       }

ITEMLIST.HTML 

<ion-list>
  <ion-item *ngFor="let product of products" text-wrap>
    <span *ngIf=product.price_html>
      <ion-thumbnail item-left>
        <img [src]= 'product.images[0].src' />
      </ion-thumbnail>
      <span [innerHTML]='product.name'></span>
      <ion-badge item-end><span [innerHTML]= "product.price_html"></span></ion-badge>
    </span>
  </ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="loadMoreItems($event)">
    <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Loading more items...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

Пожалуйста, проверьте следующее видео о точнойпроблема, о которой я упоминал выше

http://nimb.ws/isTAXE

1 Ответ

0 голосов
/ 19 апреля 2019

Вам необходимо добавить NgZone Используйте приведенный ниже код, это может быть работой. 

 import { Component, NgZone } from '@angular/core';

  export class ItemsListPage {

  @ViewChild(Content) content: Content;
  woocommerce: any;
  products: any[];
  page: number;
  category: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public zone: NgZone) 
 {
    this.page=1;
    this.category = this.navParams.get('category');
    this.products = [];

    this.woocommerce = WC({
      url:'http://xxxxxxxxxxx.com/xxxx',
      consumerKey:'ck_4c92xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      consumerSecret:'cs_ebd058cxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      wpAPI: true,
      version: 'wc/v2',
      queryStringAuth: true
    });

      this.woocommerce.getAsync('products? 
     category='+this.category.id).then((data) =>{
        this.zone.run(() => {
            this.products = JSON.parse(data.body);
        });
      },(err) =>{
         console.log(err);
      });
   }

   loadMoreItems(event){
     this.page++;
      this.woocommerce.getAsync('products? 
      category='+this.category.id+'&page='+this.page).then((data) =>{
        this.zone.run(() => {
            let temp = JSON.parse(data.body);

            this.products = this.products.concat(JSON.parse(data.body));
            event.complete();

            if(temp.length < 10){
            event.enable(false);
            }
        });
       },(err) =>{
         console.log(err);
     });
   }
...