CODEWITHSUNDEEP
angular
koque
koque

Reputation: 2256

Angular 2: Data not appearing in template

I have successfully implemented this numerous times but I must be missing something here. My ngOnInit() function invokes the DataService and returns a product as shown below.

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.css']
})
export class ProductCardComponent implements OnInit {
  product: Product;

  constructor(private dataService: DataService, private route: 
ActivatedRoute) { }

  ngOnInit() {
    this.getProduct();
  }

  getProduct() {
    this.route.params.subscribe(params => {
     let id = params["id"];

      this.dataService.getProduct(id).subscribe((product: Product) => {
        this.product = product;
        console.log("ProductCardComponent.product = " + 
JSON.stringify(this.product));
      })
    })
  }

}

But the product does not display in the template:

<div class="container-fluid">
  <div class="col-sm-12">
    <div *ngIf="product">
      <div class="col-sm-1"></div>
      <div class="col-sm-5">
        <p>{{product.name}}</p>
        <p>{{product.price}}</p>        
     </div>

      <div class="col-sm-5">
        fadfasdfadfasdf
      </div>
    </div>
  </div>
</div>

Console log:

ProductCardComponent.product = [{"_id":"59809d53734d1d58c9ad47f8","producttype":"washer","name":"Bosch SHE3AR75UC 24 Built-In Dishwasher - Stainless Steel","brand":"Bosch","model":"MVWX655DW","price":539,"list_price":699,"description":"Bosch Ascenta dishwasher SHE3AR75UC offers outstanding Bosch quietness, efficiency and a rich feature set as a superior alternative to all-plastic tub dishwashers. Our exclusive stainless steel wash tub with a polypropylene base makes purchasing an easy choice when it comes to deciding on features, quietness, and value.","rating":4,"item_no":"637743","special_value":true,"warranty":"ANSI Certified,CSA Certified","specification":{"lowes_exclusive":false,"color":"White","high_efficiency":true,"automatic_load_balancing":true,"product_capacity":"4.3 cu ft","large_items_cycle":true,"exclusive_cycle":"PowerWash","maximum_spin_speed":"660","water_levels":"Auto-sensing","number_of_rinse_cycles":"2"},"image":["bosch3.jpg","maytagBravoWasher2.jpg","maytagBravoWasher3.jpg","maytagBravoWasher4.jpg"],"feature":["Large 4.8 cu. ft. oven capacity with space for dinner and dessert","Versatile cooktop with multiple element options up to 1,800 watts","Bake Assist Temp presets make cooking even more convenient"]}]

Upvotes: 0

Views: 51

Answers (1)

Bhavik Patel
Bhavik Patel

Reputation: 1074

From your console log it seems like what you are getting is an array and not an object. So you will have to grab the first element and assign. Try this.

this.product = product[0];

Upvotes: 1

Related Questions