Angular async pipe in *ngIf - handle 0 value-CodePudding

I have the following html snippet:

<div *ngIf="calculatedValue$ | async as calculatedValue">
  {{calculatedValue}}
</div>

But if the emitted value of calculatedValue$ is 0 (type = number), the div won't be displayed in the DOM.

What is the correct way to showing it? Maybe in the way that a non null check gets added to the *ngIf.

CodePudding user response：

As you already suggested; it's type need to be number.

typeof (calculatedValue$ | async) === 'number'

Or simply not null

(calculatedValue$ | async) !== null

CodePudding user response：

This is an expected behaviour. The following are all the values that javascript currently translates to false:

if (false)
if (null)
if (undefined)
if (0)
if (NaN)
if ('')
if ("")
if (``)

The easiest way to solve this issue is to turn the emitted value from the observable into an attribute on an object. You can do this in the component class file, or directly in the HTML. I’m going to do this directly in the HTML. Here’s what that looks like:

<ng-container *ngIf="{ observableValue: promise | async } as calculatedValue">
    <div *ngIf="calculatedValue.observableValue !== null">{{ calculatedValue.observableValue }} I am now showing</div>
</ng-container>

What we’ve done here is subscribed to the observable with the async pipe, and put the value into the observableValue attribute of an object. Notice the curly brackets inside the *ngIf structural directive. We then use the as syntax, which renames the variable for use in the template. Inside the double curly brackets, the result is output by accessing the observableValue attribute of the data object. The *ngIf directive on the ng-container element will now always evaluate to true because we have created that object. So, no matter what value is emitted from the observable, we will output it to the screen.

Example: https://stackblitz.com/edit/async-pipe-jghgvc?file=app/async-pipe/async-pipe.component.html

CodePudding user response：

This issue is being tracked here: https://github.com/angular/angular/issues/15280

One of the workarounds implemented using your use case would look like this:

 <div  *ngIf="{ calculatedValue: calculatedValue$ | async } as context">
    {{ context.calculatedValue }}
 </div>

The other way which is the most likely, the only way right now is to subscribe it in your .ts component and then use that property to check for null values.