Question

我有一个简单的组件但由于某种原因我收到以下运行时错误：

处理请求时发生未处理的异常。

异常：调用节点模块失败并显示错误：错误：未捕获（在承诺中）：TypeError：无法读取属性＆＃39;名称＆＃39;未定义的   TypeError：无法读取属性＆＃39;名称＆＃39;未定义的   at CompiledTemplate.proxyViewClass.View_ProductDetailsComponent0.detectChangesInternal（/AppModule/ProductDetailsComponent/component.ngfactory.js:106:69）

以下是观点：

<h2>{{product.Name}}</h2>

<strong>Price: {{product.Price | currency}}</strong>

<div style="background-color:aliceblue;border:hidden;border-radius:15px;">
    <h4>Add to Cart</h4>
    <form name="myForm">
        Quantity: <input type="number" [(ngModel)]="quantity" placeholder="quantity" name="quantity"/>
        <input type="button" (click)="AddToCart()" ng-disabled="myForm.$invalid" value="Add" class="btn btn-default" />
    </form>
</div>

Answer 1

如果组件中的product字段为undefined，则可能会发生这种情况。为了防止这种情况，您可以使用安全导航操作符（它基本上会进行真正的检查）：

{{product?.Name}}

或者在模板中检查：

<div *ngIf="product">
  {{product.Name}}
</div>

渲染Angular组件时的一般错误

1 个答案: