传递给子组件时找不到异步管道答案

【问题标题】：Async pipe cannot be found when passing to child component传递给子组件时找不到异步管道
【发布时间】：2020-08-29 19:19:15
【问题描述】：

我正在尝试将变量传递给与异步管道一致的子组件。我可以用管道显示该数据，它工作正常。但是，当我尝试传递数据时，出现了错误。

ERROR Error: Uncaught (in promise): Error: The pipe 'async' could not be found!

错误：找不到管道“异步”！

组件视图

<!-- CONTENT -->
<div class="content">

    {{(userInfo | async)?.data()}}   // This works fine if the below is not included

    <mat-tab-group dynamicHeight="true"
                   style="width:60%; margin:0px 20%;">


        // This produces an error
        <mat-tab label="Bio">
            <profile-about [userData]='userData' [userInfo]='userInfo | async'></profile-about>
        </mat-tab>

        <mat-tab label="Companies">
            <profile-companies [userData]='userData' [userInfo]='userInfo | async'></profile-companies>
        </mat-tab>

    </mat-tab-group>

</div>
<!-- / CONTENT -->

我在articles 中看到了这个，看起来很简单。有人讨论需要包含另一个模块 - commonModule，但这对我来说意义不大。

【问题讨论】：

标签： angular rxjs angular-pipe

【解决方案1】：

我不确定您所说的userInfo | pipe 是什么意思，我认为它是userInfo | async。尽管如此，要多次使用通过async 管道获得的值，您可以使用*ngIf 指令将其包装在容器中。试试下面的

<div class="content">
  <ng-container *ngIf="userInfo | async as info">
    {{ info?.data() }}

    <mat-tab-group dynamicHeight="true" style="width:60%; margin:0px 20%;">
      <mat-tab label="Bio">
        <profile-about [userData]="userData" [userInfo]="info"></profile-about>
      </mat-tab>
      <mat-tab label="Companies">
        <profile-companies [userData]="userData" [userInfo]="info"></profile-companies>
      </mat-tab>
    </mat-tab-group>
  </ng-container>
</div>

还要注意，如果 async 管道与来自 HttpClient 的 observables 一起使用，那么每个管道都可以触发一个单独的 HTTP 请求。

【讨论】：

我编辑了上面的内容。它应该是“异步的”。我实现了包装在容器中的解决方案，但仍然出现错误“找不到管道'async'！”
你的应用中有多个模块吗？
是的。几个模块。为什么？
上面显示的组件是一个子模块。异步管道在一个实例中工作，而不是在 ngIf 指令中。
很抱歉我没有完全关注你。在我的回答中，async 管道仅出现一次，带有 *ngIf 指令。