#
is template reference variable. It defers to DOM element and cannot be used like that.
Local variables aren't implemented in Angular as of now, this closed issue can be monitored for the references to related issues.
Since Angular 4 the syntax of ngIf
and ngFor
directives was updated to allow local variables. See ngIf
reference for details. So it is possible to do
<div *ngIf="user$ | async; let user">
<h3> {{user.name}} </h3>
</div>
This will create div
wrapper element and will provide cloaking behaviour to it, so there's no need for ?.
'Elvis' operator.
If no extra markup is desirable, it can be changed to
<ng-container *ngIf="user$ | async; let user">...</ng-container>
If cloaking behaviour is not desirable, the expression can be changed to truthy placeholder value.
A placeholder can be empty object for object value,
<div *ngIf="(user$ | async) || {}; let user">
<h3> {{user?.name}} </h3>
</div>
Or a space for primitive value,
<div *ngIf="(primitive$ | async) || ' '; let primitive">
<h3> {{primitive}} </h3>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…