[英]How to call a function received from async stream using Angular async pipe? Error: Cannot have a pipe in an action expression
I would like to call a function received from a stream of data using Angular 9 async pipe.我想调用一个 function 使用 Angular 9 async Z20826A3CB51DBF46CCED 从 stream 数据接收
The following code (onApprove)="(modalData$ | async).onApprove()"
throws this error: Cannot have a pipe in an action expression
以下代码(onApprove)="(modalData$ | async).onApprove()"
抛出此错误: Cannot have a pipe in an action expression
I couldn't find a solution online, only references to questions about ngModel ( example )我在网上找不到解决方案,只能参考有关 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>
The data stream comes from Redux store数据 stream 来自 Redux 存储
@select((state: IAppState) => state.ui.modal.modalData) readonly modalData$: Observable<any>;
You can extract out the response in an ng-container
grouping element and use the reposne at all lower nested levels.您可以在ng-container
分组元素中提取响应,并在所有较低嵌套级别使用 reposne。 This way you wouldn't even require to call async
every single time.这样你甚至不需要每次都调用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.