Posted under Angular
Permalink
Tags Gotcha, Tip
The following expressions caused a brief glitch whereby null was displayed prior to the observable locationsCount emitting its value:-
<span text-capitalize>show all{{showAllActive ? ' ' + (locationsCount | async) : ''}}</span>
This makes sense as the observable with its async pipe, | async , which handles the observable, is part of a string expression. In other cases where the observable is e.g. a returned list, then you would just get an empty list with no entries. However in this case, Angular needed to evaluate and display the expression and so null was briefly displayed instead of the value of locationsCount.
The easiest way around this is to use a logical or which acts as a null coalescing operator in JavaScript/TypeScript, to replace the null with a suitable constant string:-
<span text-capitalize>show all{{showAllActive ? ' ' + (locationsCount | async)||' ' : ''}}</span>
The use of (locationsCount | async) || ‘ ‘ checks the first operand regardless of type, and if it is falsey, the second operand is taken. This is explained in this post here.
An alternative, a more complex solution which also worked in my case and may be interesting in other cases, is to concatenate the observable with another observable which emits a constant string using Observable.of(). The concat method emits all the values from each of the passed observables in turn, proceeding to the next one when an observable closes, as detailed in the RxJS api docs here. Therefore, the constant observable emits a value and completes/closes immediately which prevents the null glitch, followed by the locationsCount observable when it finally emits a value (which came from a mapped http api call):-
initial version without constant observable:-
this.locationsCount = this.locationsAutoCompleteService.getLocationsCount()
.map(count => {
let countString: string = this.formatLocationsCount(count);
return countString;
});
Alternative version with concatenated constant observable:-
this.locationsCount = Observable.of(' ').concat(
this.locationsAutoCompleteService.getLocationsCount()
.map(count => {
let countString: string = this.formatLocationsCount(count);
return countString;
})
);
Leave a Reply
You must be logged in to post a comment.