Angular 8：对对象执行乘法时出现编译错误答案

【问题标题】：Angular 8 : compilation error while performing multiplication on objectAngular 8：对对象执行乘法时出现编译错误
【发布时间】：2020-04-29 04:49:43
【问题描述】：

我在编译 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;

}

【问题讨论】：

您实际上并没有执行 orderDetailEmitter 函数，因为您缺少括号。
代码运行良好。它是只读 orderDetailEmitter = new ReplaySubject(1); 的引用
那么请更新您的问题以显示所有相关代码。
这能回答你的问题吗？ Getting Object is possibly 'null'. in Angular template file

标签： angular angular8

【解决方案1】：

您遇到的是竞争条件。您在 orderDetailEmitter observable 具有有效的整数值之前订阅它。这是正常的。

据我所知，您有两个修复方法。

合并值：

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

使用 ngIf

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

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

【讨论】：

可能的选项3，在这种情况下不要使用角管道，使用正常的订阅模式，将结果值相乘并声明一个新属性。
理想情况下，您希望避免订阅，但就您而言，您可以通过执行以下操作以 RxJs 方式处理此问题： this.productNumber =this.http.orderDetailEmitter.pipe(map(t=> t * 90));
为什么要避免订阅？只需使用Take 实现来管理它们。此外，在后台，异步管道仍然是订阅。
最好让 UI 来处理它......这就是为什么 Angular 之神创造了 |异步管道。为什么要编写额外的代码？此外，使用您的 Take 方法，当值发生变化时会发生什么？