La cuadrícula iónica no se actualiza cuando cambia el tamaño del artículo

Estoy usando la cuadrícula para mostrar mis productos. Obtengo productos correctamente, pero cuando obtengo un nuevo producto, mi vista no se actualiza. cuando agrego un brindis, luego veo las actualizaciones. Soy nuevo en los nuevos iónicos 3 y angulares 5. Por favor, diga qué estoy haciendo mal. Cualquier ayuda sería apreciada.

Código html de mi producto

<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>

Mi código Product.ts

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