角度2：以手风琴显示数据创建错误

我试图在组件中使用初始化的产品在手风琴中显示产品信息。在模板的其他部分显示产品数据，直到它到达手风琴。它在手风琴中显示数据，但生成一个错误，说明产品未定义。角度2：以手风琴显示数据创建错误

它还重新加载产品模板中的应用程序的每隔一页。

该错误显示在下面的后面。手风琴的

<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>

部分模板代码：

<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>

错误：

示出产品数据的成功的显示

部分模板代码

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)

来源

2017-08-07 koque

您的product变量为空或未定义。无论您使用什么产品，请使用?.。例如。 ... product?.description

来源

2017-08-07 16:14:56 Faisal

宾果！谢谢。 – koque

很高兴帮助。不要忘记复选标记;） – Faisal

角度2：以手风琴显示数据创建错误

回答

相关问题