Angular 2 (ng2) 在 [class.whatever] 中使用异步管道

html
<div class="whatever" [class.loading]="dataLoading | async">
  <!-- 显示加载中的信息 -->
  
加载中...
  <!-- 显示实际数据 -->
  
这里是异步加载的数据
</div>

元素添加了[class.loading]属性，并将其绑定到dataLoading异步管道上。当数据加载时，dataLoading会返回true，这样[class.loading]属性就会生效，从而显示加载中的信息。

接下来，我们使用ngIf指令来根据dataLoading异步管道的值来显示不同的内容。当异步数据加载完成后，dataLoading会返回false，这时我们就会显示实际的数据。

使用异步管道的好处

使用异步管道有几个明显的好处。首先，它可以提高用户体验。当我们使用异步数据时，页面不会被阻塞，用户可以继续浏览其他内容，而不必等待数据加载完成。

其次，使用异步管道可以提高应用程序的性能。由于异步数据的加载是在后台进行的，因此不会阻塞主线程。这意味着我们可以同时处理其他任务，而不会因为数据加载而导致应用程序变慢。

在本文中，我们介绍了如何在[class.whatever]中使用异步管道，并提供了一个示例代码。通过使用异步管道，我们可以实现在HTML模板中使用异步数据，并在数据加载完成后自动更新视图。使用异步管道可以提高用户体验和应用程序性能，是Angular 2中非常有用的功能。

希望本文对你理解和使用异步管道有所帮助！