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>

, однако я получаю правильное значение в пользовательском интерфейсе.

любая проверка, которую я могу поставить, чтобы устранить эту ошибку.

больше код

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

}

Answer 1

То, с чем вы сталкиваетесь, - это состояние гонки. Вы подписываетесь на наблюдаемый orderDetailEmitter, прежде чем он имеет действительное целочисленное значение. Это нормально.

У меня есть два исправления, о которых я знаю.

1. Объединяет значение:

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

Используйте ngIf

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

Любой из них должен сработать.