如何在ngIF条件下检查object是null还是在angular中未定义

Question

I have this inside my code:

 <div *ngIf="(listCount$| async) > 0 ">

but it won't pass the pipeline because it says

Object is possibly 'null' or 'undefined'.

in ts file:

readonly listCount$ = new BehaviorSubject<number | undefined>(undefined);

any help, can i do this in one line?

Answer 1

It's an async operation that might result in an undefined value that's why you are getting the error. Provide a default value in case of undefined in your template condition.

<div *ngIf="((listCount$| async) ?? 0) > 0 ">

OR set the strictNullChecks to false in your tsconfig.json file.

"strictNullChecks": false

Demo:- https://stackblitz.com/edit/angular-ivy-kheete?file=src%2Fapp%2Fapp.component.html

Answer 2

You can use the as syntax for a clean syntax which will allow you to use the listCount as a variable. this variable will evaluate as a condition for a truty/falsy argument so (0, undefined, null, '', NaN) will evaluate as false.

<div *ngIf="(listCount$ | async) as listCount;">hello</div>