类别:<跨度>管道

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

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

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

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

              
              

               这．的名字$ = nameService.getName()。管(丝锥(<跨度class="hljs-function">的名字＝><跨度class="hljs-keyword">这．的名字＝的名字））;
              
代码语言:<跨度class="shcb-language__name">打印稿<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">打印稿<跨度class="shcb-language__paren">）

然后在HTML模板中:

              

               <<跨度class="hljs-name">p>异步管道的名称:{{Name $ | async}}<跨度class="hljs-tag">p>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

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

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

              

               <<跨度class="hljs-name">p>名字:{{(用户$ | async)?。firstName}}<跨度class="hljs-tag">p><跨度class="hljs-tag"><<跨度class="hljs-name">p>姓氏:{{(用户$ | async)?。lastName}}<跨度class="hljs-tag">p>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

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

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

              

               <<跨度class="hljs-name">div＊<跨度class="hljs-attr">ngIf＝<跨度class="hljs-string">"user$ | async as user"><跨度class="hljs-tag"><<跨度class="hljs-name">p>名字:{{用户。firstName}}<跨度class="hljs-tag">p><跨度class="hljs-tag"><<跨度class="hljs-name">p>姓:{{用户。lastName}}<跨度class="hljs-tag">p><跨度class="hljs-tag">div>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

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

              

               <<跨度class="hljs-name">ng-template［<跨度class="hljs-attr">ngIf] =<跨度class="hljs-string">"user$ | async"<跨度class="hljs-attr">让用户><跨度class="hljs-tag"><<跨度class="hljs-name">p>名字:{{用户。firstName}}<跨度class="hljs-tag">p><跨度class="hljs-tag"><<跨度class="hljs-name">p>姓:{{用户。lastName}}<跨度class="hljs-tag">p><跨度class="hljs-tag">ng-template>
              
代码语言:<跨度class="shcb-language__name">HTML、XML<跨度class="shcb-language__paren">（<跨度class="shcb-language__slug">xml<跨度class="shcb-language__paren">）

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