javascript - 如何使用Angular异步管道调用从异步流接收的函数？错误：动作表达式中不能有管道

Question

我想使用 Angular 9 异步管道调用从数据流中接收的函数。

以下代码(onApprove)="(modalData$ | async).onApprove()"引发此错误：Cannot have a pipe in an action expression

我在网上找不到解决方案，只能参考有关 ngModel 的问题（示例）

<div class="confirm-modal-container">
  <div class="title">{{(modalData$ | async).title}}</div>
  <div class="body">{{(modalData$ | async).body}}</div>
    <app-action-buttons (onApprove)="(modalData$ | async).onApprove()" (onCancel)="(modalData$ | async).onCancel()" [cancelText]="currentStep === 0 ? 'Cancel' : 'Previous'" [approveText]="control[currentStep].actionBtnText"></app-action-buttons>
</div>

数据流来自 Redux store

@select((state: IAppState) => state.ui.modal.modalData) readonly modalData$: Observable<any>;

Answer 1

您可以提取ng-container分组元素中的响应，并在所有较低嵌套级别使用响应。这样你甚至不需要async每次都打电话。

<div class="confirm-modal-container">
    <ng-container *ngIf="modalData$ | async as modelData">
        <div class="title">{{modelData.title}}</div>
        <div class="body">{{modelData.body}}</div>
        <app-action-buttons (onApprove)="modelData.onApprove()" (onCancel)="modelData.onCancel()" [cancelText]="currentStep === 0 ? 'Cancel' : 'Previous'" [approveText]="control[currentStep].actionBtnText"></app-action-buttons>
    </ng-container>
</div>