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

Question

我正在尝试在我的产品组件模板中显示从本地服务器获取的产品。这个模板应该会显示在我的app.component的模板中。我可以从app.component.ts 控制器中成功实例化productModel 实例，但是当我尝试在app.component.html 模板上的表格中显示产品时，我收到以下错误：知道我可以在哪里查找问题吗？

我的错误：

error_handler.js:48EXCEPTION：./ProductComponent 类 ProductComponent 中的错误 - 内联模板：8:4 原因：无法读取 undefinedErrorHandler.handleError @ error_handler.js:48 的属性“描述” error_handler.js:50原始异常：无法读取 undefinedErrorHandler.handleError @ error_handler.js:50 的属性“描述” error_handler.js:53 原始堆栈跟踪：ErrorHandler.handleError @ error_handler.js:53 error_handler.js:54TypeError：无法读取未定义的属性“描述” 在 _View_ProductComponent0.detectChangesInternal (component.ngfactory.js:128) 在 _View_ProductComponent0.AppView.detectChanges (view.js:233) 在 _View_ProductComponent0.DebugAppView.detectChanges (view.js:338) 在 _View_AppComponent0.AppView.detectViewChildrenChanges (view.js:259) 在 _View_AppComponent0.detectChangesInternal (component.ngfactory.js:126) 在 _View_AppComponent0.AppView.detectChanges (view.js:233) 在 _View_AppComponent0.DebugAppView.detectChanges (view.js:338) 在 _View_AppComponent_Host0.AppView.detectViewChildrenChanges (view.js:259) 在 _View_AppComponent_Host0.detectChangesInternal (host.ngfactory.js:33) 在 _View_AppComponent_Host0.AppView.detectChanges (view.js:233)ErrorHandler.handleError@error_handler.js:54 error_handler.js:57错误上下文:ErrorHandler.handleError@error_handler.js:57 error_handler.js:58DebugContextErrorHandler.handleError@error_handler.js:58 zone.js:388Unhandled Promise 拒绝：./ProductComponent 类 ProductComponent 中的错误 - 内联模板：8:4 原因：无法读取未定义的属性“描述”；区域：;任务：Promise.then；值：ViewWrappedError TypeError：无法读取未定义的属性“描述” 在 _View_ProductComponent0.detectChangesInternal (/AppModule/ProductComponent/component.ngfactory.js:128:62) 在 _View_ProductComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56051:14) 在 _View_ProductComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56156:44) 在 _View_AppComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56077:19) 在 _View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:126:8) 在 _View_AppComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56051:14) 在 _View_AppComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56156:44) 在 _View_AppComponent_Host0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56077:19) 在 _View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:33:8) 在 _View_AppComponent_Host0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56051:14)consoleError@zone.js:388 zone.js:390Error: Uncaught (in promise): Error: Error in ./ProductComponent class ProductComponent - inline template:8:4 原因：无法读取 undefined(...)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>

我的产品组件控制器：

import { Component, OnInit, Input } from '@angular/core';

import { ProductModel } from '../../models/product.model';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css'],
  host: {
      class : 'row'
  }

})
export class ProductComponent implements OnInit {
    @Input() product: ProductModel;

  constructor() { }

  ngOnInit() {
  }

}

我的app.component 模板：

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

我的应用组件控制器：

import { Component } from '@angular/core';

import { RestService } from "./services/rest.service";
import { ProductModel } from "./models/product.model";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    product: ProductModel;

    constructor(private restService: RestService){

    }

submitBarcode(barcode: HTMLInputElement){

    this.restService.getProduct(barcode.value)
    .subscribe(
    (res) => {
        this.product = new ProductModel(res.BaseURI, res.CustomError, res.ProviderName, res.RequestFormData, res.RequestURI, res.ResponseCode, res.AvgQty1, res.AvgQty2, res.AvgQty3, res.BarCode, res.Description, res.POSDescription, res.POSPrice, res.ProductCode, res.PurchCount, res.StockOnHand);
        console.log("returned product description: " + this.product.Description);
        //console.log(res);
    },
    (res) => {
        console.log("failure" + res);
    }
    );
    //console.log("product: " + product);
}

}

Answer 1

这是因为在您的 http 调用完成之前，product 才被定义。您可以使用安全导航运算符 (?) 来保护您的模板在数据到达之前不会出现当前错误：

<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 指令，在 http 调用完成后将您的表添加到 DOM：

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

Answer 2

您可以像这样使用*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>