在 Angular 2+ 中更改"*ngIf= 'condition | async as data' to [hidden]"

Question

我有

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

这是从DOM中移除div元素。在我的场景中，我需要div元素始终存在于DOM中。所以我在尝试<div [hidden]='!condition | async as data'>我发现async不适用于[隐藏]

Answer 1

您可以向元素(或样式(添加一个类，并将可见性设置为隐藏：

直接设置样式：

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

添加一个类来设置CSS：

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

(还没有在这些绑定中使用"as"进行测试，但假设这会起作用——使用我之前测试过的数据/管道本身。

Answer 2

当您有一个"异步；并且你需要"；重复"；，一种技巧性的方式是创建"；"飞行中"；ng容器中的对象，并询问对象

<!--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>