javascript - 如何使用Angular异步管道调用从异步流接收的函数?错误:动作表达式中不能有管道
问题描述
我想使用 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>;
解决方案
您可以提取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>
推荐阅读
- java - 二进制搜索必须返回一个值,尽管返回一个值
- hyperledger-sawtooth - 无法从我的事务系列的 REST-API 接收数据
- javascript - 将元素传递给 node.js 终端
- testing - 来自测试架构的 ASP
- c# - Emgu CV Ram问题
- reactjs - 无法获取链接以显示新页面
- java - 致命异常:主进程:com.empowered.healo,PID:28143 io.reactivex.exceptions.CompositeException:发生2个异常。?
- python - 从字典中打印单个唯一行而不重复
- python - 如何垂直合并两个图像?
- javascript - 一段时间后更改文档中的变量值?