Ionic 4 not showing data in HTML

385 Views Asked by At

l’m developing app.The code working fine in console with out any error , but no information in html. Here is the code : home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-grid>
      <ion-row>
        <ion-slides>
          <ion-slide *ngFor="let product of products">
           <ion-card no-padding>
              <img [src]= 'product.images[0].src' />
              <p>{{product.name}}</p>
              <p>{{product.title}}</p>
           </ion-card>
          </ion-slide>
        </ion-slides>
      </ion-row>
    </ion-grid>
</ion-content>

home.page.ts

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import * as WS from 'woocommerce-api';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  WooCommerce : any;
  products : any[];
  constructor(public navCtrl : NavController)
  {
    this.WooCommerce = WS({
      url:"http://*****.com",
      consumerKey: "ck_******",
      consumerSecret: "cs_*****",
      wpAPI: true,
      version: 'wc/v1'
    });
    this .WooCommerce.getAsync("products").then((data) =>{
      console.log(JSON.parse(data.body));
      this.products= JSON.parse(data.body).products;
    },(err) =>{
      console.log(err)
    })

}

Ionic Info:

ionic (Ionic CLI) : 4.10.0

System:

NodeJS : v11.8.0 npm : 6.5.0 OS : Windows 10

0

There are 0 best solutions below