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

在Angular 2+中，将"*ngIf='condition | async as data'改为[hidden]的目的是为了在模板中根据条件来隐藏或显示元素，而不是完全从DOM中移除它。

"*ngIf='condition | async as data'"是一个结构指令，它根据给定的条件来决定是否渲染或移除元素。它还使用了异步管道（async pipe），用于处理异步数据流。

而[hidden]是一个属性绑定，它根据给定的条件来设置元素的hidden属性。当条件为真时，元素会被隐藏，当条件为假时，元素会显示。

这两种方式的区别在于，"*ngIf"会完全从DOM中移除元素，而"[hidden]"只是隐藏元素，但仍然保留在DOM中。因此，当条件频繁变化时，使用[hidden]可以提高性能，因为不需要频繁地添加或移除元素。

以下是将"*ngIf='condition | async as data'"改为"[hidden]"的示例代码：

<!-- 使用"*ngIf" -->
<div *ngIf="condition | async as data">
  <!-- 元素内容 -->
</div>

<!-- 使用"[hidden]" -->
<div [hidden]="!(condition | async)">
  <!-- 元素内容 -->
</div>

在上述示例中，condition是一个Observable对象，通过async管道将其转换为异步数据流。当condition的值为真时，元素会被渲染或显示，当condition的值为假时，元素会被移除或隐藏。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

• 腾讯云云服务器（CVM）：提供可扩展的计算能力，用于部署和运行各种应用程序。了解更多信息，请访问腾讯云云服务器（CVM）。
• 腾讯云云函数（SCF）：无需管理服务器即可运行代码的事件驱动计算服务。了解更多信息，请访问腾讯云云函数（SCF）。