在 Angular 2+ 中将“*ngIf= 'condition | async as data' 更改为 [hidden]”

Question

I have

 <div *ngIf='condition | async as data'>
    <div *ngIf='data.length > 0'>some html to render ...
    </div>
 </div>

which is removing the div element from DOM. In my scenario I need div element to be always present in DOM. So I was trying <div [hidden]='!condition | async as data'> <div [hidden]='!condition | async as data'> I found that async doesn't work with [hidden]

Answer 1

when you has an "async" and you need "repeat", a tipical way is create "on fly" an object in a ng-container and ask about the object

<!--see that the property is always true-->
<ng-container *ngIf="{data:condition|async} as obj">
  <!--see that you ask about obj.data-->
  <!--I use an unique *ngIf-->
  <div *ngIf="obj.data && obj.data.length">
           ..put your code...
           ..if data is an array you can iterate..
           ..eg.
      <div *ngFor="let item of obj.data">
           {{item.id}}
      </div>
  </div>
</ng-container>

Answer 2

You can add a class to your element (or style), and with this set the visibility to hidden:

Setting style directly:

<div [style.visibility]="((condition | async) as data) ? 'visible' : 'hidden'"><div *ngIf='data?.length'>some html to render ...</div></div>`

Adding a class to set CSS through that:

    <div [class.hidden]="((condition | async) as data)"><div *ngIf='data?.length'>some html to render ...</div></div>`

(Have not tested using 'as' inside these bindings, but assume that will work - using the data/pipe itself I have tested before.