Angular 8 : 对对象执行乘法时出现编译错误

Question

我在编译 angular 代码时遇到问题

  ERROR in src/app/order-details/order-details.component.html:76:55 - error TS2531: Object is possibly 'null'.

76         <div class="mat-display-1">you have to pay {{(productNumber | async ) * 90  }}  $</div>

但是我在 UI 上得到了正确的值。

我可以进行任何检查以消除此错误。

更多代码

constructor(private http : HttpClientService) {
this.productNumber=this.http.orderDetailEmitter;

}

Answer 1

您运行遇到的是竞争条件。您在 orderDetailEmitter 可观察对象具有有效整数值之前订阅它。这是正常的。

据我所知，您有两个修复程序。

合并值：

{{ ( (productNumber | async ) || 0 )* 90  }}

使用 ngIf

<div *ngIf="productNumber | async" class="mat-display-1">you have to pay {{(productNumber | async ) * 90  }}  $</div>

其中任何一个都可以解决问题。

Angular 8 : 对对象执行乘法时出现编译错误

Angular 8 : compilation error while performing multiplication on object

angular

angular8