CODEWITHSUNDEEP
angular
koque
koque

Reputation: 2256

Angular 2: Displaying data in accordion creating error

I am trying to display product information in an accordion using product initialized in the component. Displaying the product data in other parts of the template works until it gets to the accordion. It displays the data in the accordion but generates an error saying the product is undefined.

It also reloads every other page of the application in the product template.

The error is shown later below.

Partial template code showing succesful display of product data:

<div class="col-sm-5">
    <div class="thumbnail">
      <p class="price inline">
        {{product.price | currency:'USD':'true':'1.2-2'}}
      </p>
      <small class="inline">
        Was {{product.list_price | currency:'USD':'true':'1.2-2'}} &nbsp;
      </small>

      <p id="percent" class="inline">SAVE {{getPercentageSaving(product) | number:'2.0-0'}}%</p>

Partial template code of accordion:

<div class="col-sm-12">
<div class="col-sm-1"></div>
<div class="col-sm-10">
  <h3 class="text-center"><b>Product Information</b></h3>
  <div class="panel">
    <div class="panel-heading accordion">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#descrption">
          <i class="fa fa-circle-o" aria-hidden="true"></i>
      Description
    </a>
      </h4>
    </div>
    <div id="descrption" class="panel-collapse collapse in">
      <div class="panel-body">
         {{product.description}} 
      </div>
    </div>
  </div>

  <div class="panel">
    <div class="panel-heading accordion">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#specifications">
          <i class="fa  fa-file-text" aria-hidden="true"></i>
      Specifications
    </a>
      </h4>
    </div>
    <div id="specifications" class="panel-collapse collapse">
      <div class="panel-body">

      </div>
    </div>
  </div>

Error:

ng:///AppModule/ProductCardComponent.ngfactory.js:369 ERROR TypeError: Cannot read property 'description' of undefined
at Object.eval [as updateRenderer] (ng:///AppModule/ProductCardComponent.ngfactory.js:467)
at Object.debugUpdateRenderer [as updateRenderer] (vendor.bundle.js:76622)
at checkAndUpdateView (vendor.bundle.js:75769)
at callViewAction (vendor.bundle.js:76129)
at execComponentViewsAction (vendor.bundle.js:76061)
at checkAndUpdateView (vendor.bundle.js:75770)
at callViewAction (vendor.bundle.js:76129)
at execEmbeddedViewsAction (vendor.bundle.js:76087)
at checkAndUpdateView (vendor.bundle.js:75765)
at callViewAction (vendor.bundle.js:76129)

Upvotes: 1

Views: 52

Answers (1)

FAISAL
FAISAL

Reputation: 34673

Your product variable is null or undefined. Use ?. wherever you are usimg product. E.g. ... product?.description

Upvotes: 1

Related Questions