CODEWITHSUNDEEP
angular
Shivam Upadhyay
Shivam Upadhyay

Reputation: 70

I want to display list of product

its only display [object object] and while console the property of the products it is shown the undefined property.while the show in HTML file products it does not get value. and input the value of the products to another component its not show any value. 

import { Component ,EventEmitter, OnInit} from '@angular/core';
    import { Product } from './product.model';

    //this called decorator
    @Component({
      // tells Angular what element to match
      selector: 'app-root',
      //define the view
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
    })
    // this is controller
    export class AppComponent implements OnInit {
      products: Product[];

      constructor() {
        this.products = [
          new Product(
            'MYSHOES',
            'Black Running Shoes',
            '/assets/img/nike.jpeg',
            ['Men', 'Shoes', 'Runings'],
            109.99
          ),
          new Product(
            'BAT',
            'A Nice Black Hat',
            '/assets/img/Bat.jpg',
            ['Men', 'Apparel', 'bat'],
            29.99
          ),
          new Product(
            'NICHET',
            'A Nice Black Hat',
            '/assets/img/product/black-hat.png',
            ['Men', 'Accessories', 'Hats'],
            29.99
          )
        ];

      }

    ngOnInit(){
      this.products
    }
      productWasSelected(product: Product): void {
        console.log('Prodiuct clicked', product);
      }
    }

this is my html page !!

    <div class="inventory-app">
      <app-products-list>
        [productList]="products"
         (onProductSelected)="productWasSelected($event)"
      </app-products-list>
      <h1>{{products}}</h1>
    </div>

Upvotes: 1

Views: 4266

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You need use *ngFor to display list object with properties as

<div class="item" *ngFor="let item of products">
  <h1>{{item.name}}</h1>
  <img src='{{item.image}}' />
  <p>{{item.price}}</p>

</div>

I made an sample in stackbliz you can refer: https://stackblitz.com/edit/angular-xgdtu7

Upvotes: 0

Shlok Nangia
Shlok Nangia

Reputation: 2377

angular just shows that it is array of Objects so you need to use ngFor

<h1 *ngFor="let product of products"> 
  {{product.name}}
</h1>

And after this also you cannot use {{product}} but you need to use some propety of product like {{product.name}} or {{product.type}}

Upvotes: 0

Pratyush Swain
Pratyush Swain

Reputation: 154

you are initializing products array the wrong way.

The product array should contain elements, but you are initializing a class, instead it should be an array of objects.

And you might have declared the keys in the model with their type, use it over here.

sample model

export interface ShoeDetails{
name: string;
type: string;
img: string;
category: [string];
price: number;
}

Product array should look like this: 

products: Array<ShoeDetails> = [];

     this.products = [
              {
               name: 'MYSHOES',
               type: 'Black Running Shoes',
               img: '/assets/img/nike.jpeg',
               category:  ['Men', 'Shoes', 'Runings'],
               price:109.99
               }
              ,
             ...
            ];

and in ngOnInit this.products doesn't make sense. the particular line won't initialize, if you thought about it.Please remove it.

now in the HTML you can use it like this way to access the name of each elements in the product array:

<h1 *ngFor="let product of products">{{product.name}}</h1>

Upvotes: 0

Related Questions