Question

我正在尝试使用在组件中初始化的产品以手风琴显示产品信息。在模板的其他部分显示产品数据一直有效，直到它到达手风琴。它显示手风琴中的数据，但会生成错误，说明产品未定义。

它还会在产品模板中重新加载应用程序的每个其他页面。

错误将在下面显示。

部分模板代码显示产品数据的成功显示：

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

Answer 1

您的product变量为null或未定义。无论您身在何处，都可以?.使用产品。例如。 ...... product?.description

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

1 个答案: