Angular2：在模板中显示对象的问题

我试图在产品组件的模板中显示从本地服务器获取的产品。此模板应显示在my

应用程序组件的模板中。我可以从我的
app.component.ts
controller中成功实例化
productModel
实例，但是当我尝试在我的
app.component.html
模板的表中显示产品时，我得到以下错误：知道我可以在哪里查找问题吗

我的错误：

error_handler.js:48异常：./ProductComponent类ProductComponent-内联模板：8:4中的错误，原因是：无法读取UndelineErrorHandler.handleError@error_handler.js:48的属性“Description”
error_handler.js:50原始异常：无法读取undefinedErrorHandler.handleError@error_handler.js:50的属性“Description”
error_handler.js:53原始堆栈跟踪：ErrorHandler.handleError@error_handler.js:53
error_handler.js:54TypeError:无法读取未定义的属性“Description”
查看产品组件0.detectChangesInternal（component.ngfactory.js:128）
在_View_ProductComponent0.AppView.detectChanges上（View.js:233）
在_View_ProductComponent0.DebugAppView.detectChanges（View.js:338）
在_View\u AppComponent0.AppView.detectViewChildrenChanges（View.js:259）
在_View_AppComponent0.detectChangesInternal（component.ngfactory.js:126）
查看AppComponent0.AppView.detectChanges（View.js:233）
在_View_AppComponent0.DebugAppView.detectChanges（View.js:338）
在_View_AppComponent_Host0.AppView.detectViewChildrenChanges（View.js:259）
位于_View\u AppComponent\u Host0.detectChangesInternal（host.ngfactory.js:33）
在_View_AppComponent_Host0.AppView.detectChanges（View.js:233）ErrorHandler.handleError@error_handler.js:54
error\u handler.js:57错误上下文：ErrorHandler.handleError@error\u handler.js:57
error_handler.js:58DebugContextErrorHandler.handleError@error_handler.js:58
zone.js:388未处理的承诺拒绝：./ProductComponent类ProductComponent-内联模板中的错误：8:4原因：无法读取未定义的属性“说明”；区域：；任务：承诺；值：ViewWrappedError类型错误：无法读取未定义的属性“说明”
在_View_ProductComponent0.detectChangesInternal（/AppModule/ProductComponent/component.ngfactory.js:128:62）
在_View_ProductComponent0.AppView.detectChanges（）中
在_View_ProductComponent0.DebugAppView.detectChanges（）中
在_View_AppComponent0.AppView.detectViewChildrenChanges（）中
在_View_AppComponent0.detectChangesInternal（/AppModule/AppComponent/component.ngfactory.js:126:8）
在_View_AppComponent0.AppView.detectChanges（）中
在_View_AppComponent0.DebugAppView.detectChanges（）中
在_View_AppComponent_Host0.AppView.detectViewChildrenChanges（）中
位于_View\u AppComponent\u Host0.detectChangesInternal（/AppModule/AppComponent/host.ngfactory.js:33:8）
在_View_AppComponent_Host0.AppView.detectChanges（@zone.js:388
zone.js:390Error:Uncaught（承诺中）：错误：./ProductComponent类ProductComponent-内联模板中的错误：8:4原因：无法读取未定义（…）consoleError@zone.js:390的属性“说明”

我的产品组件模板：

<table class="table-responsive">
<tr>
<th>Description</th>
<th>POS Description</th>
<th>POS Price</th>
<th>Stock On Hand</th>
</tr>
<tr>
<td>{{product.Description}}</td>
<td>{{product.POSDescription}}</td>
<td>{{product.POSPrice}}</td>
<td>{{product.StockOnHand}}</td>
</tr>
</table>

<div class="row">
<div class="col-md-6 col-md-push-3">
<form class="form-horizontal" role="form">
    <div class="form-group">        
        <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" #barcode>    
    </div>
    <button class="btn btn-submit btn-block" (click)="submitBarcode(barcode)">Submit</button>
</form>
</div>
</div>
<div class="row">
    <app-product [product]="product"></app-product>-->
</div>

我的
app.component
模板：

<table class="table-responsive">
<tr>
<th>Description</th>
<th>POS Description</th>
<th>POS Price</th>
<th>Stock On Hand</th>
</tr>
<tr>
<td>{{product.Description}}</td>
<td>{{product.POSDescription}}</td>
<td>{{product.POSPrice}}</td>
<td>{{product.StockOnHand}}</td>
</tr>
</table>

<div class="row">
<div class="col-md-6 col-md-push-3">
<form class="form-horizontal" role="form">
    <div class="form-group">        
        <input type="number" class="form-control" id="barcode" placeholder="Enter Barcode" #barcode>    
    </div>
    <button class="btn btn-submit btn-block" (click)="submitBarcode(barcode)">Submit</button>
</form>
</div>
</div>
<div class="row">
    <app-product [product]="product"></app-product>-->
</div>

这是因为在http调用完成之前，
产品
未定义。在数据到达之前，您可以使用安全导航操作符（
？
）来保护模板不受当前错误的影响：

<table class="table-responsive">
<tr>
<th>Description</th>
<th>POS Description</th>
<th>POS Price</th>
<th>Stock On Hand</th>
</tr>
<tr>
<td>{{product?.Description}}</td>
<td>{{product?.POSDescription}}</td>
<td>{{product?.POSPrice}}</td>
<td>{{product?.StockOnHand}}</td>
</tr>
</table>

您可以使用
*ngIf
，如下所示：

<table *ngIf="product" class="table-responsive">
 <tr>
  <th>Description</th>
  <th>POS Description</th>
  <th>POS Price</th>
  <th>Stock On Hand</th>
</tr>
<tr>
  <td>{{product.Description}}</td>
  <td>{{product.POSDescription}}</td>
  <td>{{product.POSPrice}}</td>
  <td>{{product.StockOnHand}}</td>
  </tr>
</table>


描述
位置描述
POS价格
库存
{{product.Description}}
{{product.POSDescription}}
{{product.POSPrice}}
{{product.StockOnHand}
非常感谢@Stefan Svrkota我今天从你那里学到了一些非常有用的东西：）
<table *ngIf="product" class="table-responsive">
 <tr>
  <th>Description</th>
  <th>POS Description</th>
  <th>POS Price</th>
  <th>Stock On Hand</th>
</tr>
<tr>
  <td>{{product.Description}}</td>
  <td>{{product.POSDescription}}</td>
  <td>{{product.POSPrice}}</td>
  <td>{{product.StockOnHand}}</td>
  </tr>
</table>