异步管道语法技巧

昨天，我们写过如何使用异步管道自动订阅和取消订阅从我们的观测数据。

当我教授这个话题时，人们通常至少有以下两种反对意见之一:

如果我还需要订阅的数据在我的Typescript代码?

首先，使用异步pipe似乎只允许您访问HTML模板中的数据。但事实并非如此，因为你仍然可以使用tap操作符来“监视”你的可观察对象，并从中获取数据。例如(完整例子)：

             
             

              这.name$ = nameService.getName()。管(丝锥(的名字= >这.name = name));
             
代码语言:打印稿（打印稿）

然后在HTML模板中:

             

              <p>async管道的名称:{{Name $ | async}}p>
             
代码语言:HTML、XML（xml）

如果我需要从订阅中的对象中读取多个属性怎么办?

另一种说法是，你不想以这样的方式结束:

             

              <p>名字:{{(用户$ | async)?。firstName}}p><p>姓氏:{{(用户$ | async)?。lastName}}p>
             
代码语言:HTML、XML（xml）

上面的代码很难阅读，每个属性都需要一个订阅。这本身就是一场灾难，因为每个订阅都可能触发来自服务器的相同数据的HTTP请求!

相反，您可以这样做，只使用一个订阅，将结果存储在一个局部变量中，然后在数据可用时呈现数据。此技术适用于任何结构指令，例如* ngIf或* ngFor：

             

              <div＊ngIf＝"user$ | async as user"><p>名字:{{用户。firstName}}p><p>姓:{{用户。lastName}}p>div>
             
代码语言:HTML、XML（xml）

如果通过添加元素来适应订阅来更改DOM结构让您感到困扰，那么您可以使用ng-template相反，尽管这里的语法也可能有点令人不安:

             

              <ng-template［ngIf] ="user$ | async"让用户><p>名字:{{用户。firstName}}p><p>姓:{{用户。lastName}}p>ng-template>
             
代码语言:HTML、XML（xml）

好了，今天就到这里吧。明天，我们将看到我们如何做得比现在更好。