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

Question

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

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

错误：找不到管道'async'！

组件视图

<!-- 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需要包括在内，但对我来说意义不大。

Answer 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的可观察对象一起使用，则每个管道都可以触发一个单独的HTTP请求。