CODEWITHSUNDEEP
javascriptangulartypescriptionic3
Mohamed Ali Lassoued
Mohamed Ali Lassoued

Reputation: 311

Undefined object from my product page

This is my constructor into product-details.ts

product: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {


    this.product = this.navParams.get("product");
    console.log(this.product);
    
  }

This is my home.ts

  openProductPage(product){
    this.navCtrl.push(ProductDetailsPage, {"product": product} );
  }

And this is the html file home.html

<ion-list>
    <ion-item *ngFor="let products of moreProducts" text-wrap (click)="openProductPage(product)">
        <ion-thumbnail item-left>
          <img [src]="products.featured_src" />
        </ion-thumbnail>

        <h1>{{products.title}}</h1>
        <p>
          <span [innerHTML]="products.short_description.substr(0, 50) + '...'"></span>
          <span [innerHTML]="products.price_html"></span>
        </p>

         <button ion-button  icon clear item-right>
           <ion-icon name="arrow-forward"></ion-icon>
         </button>
    </ion-item>
  </ion-list>

And when I click to an product it show "undefined " in the console log by the way I added all necessary things in the app.module.ts which import "..." & declarations & entryComponents

Upvotes: 1

Views: 141

Answers (1)

Pietro Nadalini
Pietro Nadalini

Reputation: 1800

In your code you are using products in the ngFor, so you should use that variable when you call the method click

<ion-item *ngFor="let products of moreProducts" text-wrap (click)="openProductPage(products)">

Upvotes: 2

Related Questions