Question

我正在使用网格来展示我的产品。我成功地获得了产品但是当我得到新产品时，我的观点没有更新。当我添加一个toast然后查看更新。我是新的离子3和角5的新手。请告诉我说我做错了。任何帮助将不胜感激。

我的产品HTML代码

<ion-content>
  <!--<ion-grid class="empty" *ngIf="products.length == 0">
<ion-row align-items-center>
  <ion-col align-self-center text-center>
    <ion-icon name="basket" color="secondary"></ion-icon>
    <h4 margin-bottom>EMPTY</h4>
  </ion-col>
</ion-row>
  </ion-grid>-->

  <ion-grid>
<ion-row>
  <ion-col col-6 *ngFor="let product of products" no-padding>
    <div text-left class="product-item" tappable>
      <ion-card>

        <button class="fav" tappable (click)="setWishlist(product)" ion-button clear icon-only>
          <ion-icon *ngIf="product.variations.length == 0" no-padding name="heart{{!wishlist.isWishlist(product) ? '-outline' : ''}}"></ion-icon>
        </button>
        <div class="img" [ngStyle]="{'background-image': 'url(' + product.images[0].src +')'}">
          <ion-badge *ngIf="product.on_sale">{{product | discount}}</ion-badge>
        </div>
        <h5 [innerHTML]="product.name"></h5>
        <div class="price">
          <!-- <span class="strike" *ngIf="product.on_sale">{{ product.regular_price | currency}}</span> 
              {{ product.price | currency}}-->
          <span [innerHTML]="product.price_html"></span>
        </div>
        <rating *ngIf="product.average_rating" item-start max="5" readOnly="true" [(ngModel)]="product.average_rating" style="float:left">
        </rating>
        <span class="rating_count" *ngIf="product.rating_count">({{product.rating_count}})</span>


      </ion-card>
    </div>
  </ion-col>
</ion-row>
  </ion-grid>

  <ion-infinite-scroll *ngIf="hasMore" (ionInfinite)="loadMoreProducts($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

我的产品代码

constructor(public navCtrl: NavController, public navParams: NavParams, public WC: WooCommerceProvider,
  private loader: LoadingProvider, public toastCtrl: ToastProvider, public wishlist: WishlistProvider) {
  this.params.id = this.navParams.data.params.id;
  this.params.id = this.navParams.data.params.id;
  this.params.search = this.navParams.data.params.search;
  this.params.per_page = 10;

  console.log(this.params);
  this.loadProducts(this.params);

}

ionViewDidLoad() {
  console.log('ionViewDidLoad ProductPage');
}
loadProducts(p: any) {
  this.loader.show();
  this.WC.getAllProducts(this.page, p.id, p.search, null, null, p.per_page, null, p.order, p.attribute, p.attribute_term).then((data) => {
    this.products = data;
    if (this.products.length == p.per_page) {
      this.hasMore = true;
    }
    this.loader.dismiss();
  });
}
loadMoreProducts(event) {
  this.page++;
  console.log("Getting page " + this.page);
  this.WC.getAllProducts(this.page, this.params.id, this.params.search, null, null, this.params.per_page, null, this.params.order, this.params.attribute, this.params.attribute_term).then((data) => {
    let temp = data;
    this.products = this.products.concat(temp);
    event.complete();

    if (temp.length <this.params.per_page) {
      this.hasMore = false;
      event.enable(false);
      //Adding this toast product updates
      //this.toastCtrl.show("No More Products");
    }
  });
}

Answer 1

所以我想出来并认为我应该在这里为未来的用户写。这是面向NgZone角色5的许多用户面临的问题。您需要做的就是在ngzone中运行更新列表，如下所示

import {NgZone} from '@angular/core';
.....

constructor(public zone: NgZone){
......
......
......
}

loadMoreProducts(){
    this.zone.run(() => {
       this.products = this.products.concat(data));
    }
}

当项目大小发生变化时，离子网格不会更新

1 个答案: