Question

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

我的错误：

error_handler.js：48EXCEPTION：。/ ProductComponent类中的错误ProductComponent - 内联模板：8：4导致：无法读取undefinedErrorHandler.handleError @ error_handler.js的属性'Description'：48 error_handler.js：50ORIGINAL EXCEPTION：无法读取undefinedErrorHandler.handleError @ error_handler.js的属性'Description'：50 error_handler.js：53ORIGINAL STACKTRACE：ErrorHandler.handleError @ error_handler.js：53 error_handler.js：54TypeError：无法读取未定义的属性“描述” at _View_ProductComponent0.detectChangesInternal（component.ngfactory.js：128） at _View_ProductComponent0.AppView.detectChanges（view.js：233） at _View_ProductComponent0.DebugAppView.detectChanges（view.js：338） at _View_AppComponent0.AppView.detectViewChildrenChanges（view.js：259） at _View_AppComponent0.detectChangesInternal（component.ngfactory.js：126） at _View_AppComponent0.AppView.detectChanges（view.js：233） at _View_AppComponent0.DebugAppView.detectChanges（view.js：338） at _View_AppComponent_Host0.AppView.detectViewChildrenChanges（view.js：259） at _View_AppComponent_Host0.detectChangesInternal（host.ngfactory.js：33） at _View_AppComponent_Host0.AppView.detectChanges（view.js：233）ErrorHandler.handleError @ error_handler.js：54 error_handler.js：57ERROR语境：ErrorHandler.handleError @ error_handler.js：57 error_handler.js：58DebugContextErrorHandler.handleError @ error_handler.js：58 zone.js：388Unhandled Promise rejection：./ ProductComponent类中的错误ProductComponent - 内联模板：8：4导致：无法读取未定义的属性“描述”;区域：;任务：Promise.then;值：ViewWrappedError TypeError：无法读取未定义的属性“描述” at _View_ProductComponent0.detectChangesInternal（/AppModule/ProductComponent/component.ngfactory.js:128:62） at _View_ProductComponent0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56051:14） at _View_ProductComponent0.DebugAppView.detectChanges（http://localhost:4200/main.bundle.js:56156:44） at _View_AppComponent0.AppView.detectViewChildrenChanges（http://localhost:4200/main.bundle.js:56077:19） at _View_AppComponent0.detectChangesInternal（/AppModule/AppComponent/component.ngfactory.js:126:8） at _View_AppComponent0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56051:14） at _View_AppComponent0.DebugAppView.detectChanges（http://localhost:4200/main.bundle.js:56156:44） at _View_AppComponent_Host0.AppView.detectViewChildrenChanges（http://localhost:4200/main.bundle.js:56077:19） at _View_AppComponent_Host0.detectChangesInternal（/AppModule/AppComponent/host.ngfactory.js:33:8） at _View_AppComponent_Host0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56051:14)consoleError @ zone.js：388 zone.js：390错误：未捕获（在保证中）：错误：./ProductComponent类中的错误ProductComponent - 内联模板：8：4导致：无法读取未定义的属性“描述”（...）consoleError @ zone.js：390 < / p>

我的产品组件模板：

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

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

1 个答案: