我需要使用没有ngFor的异步管道.我需要判断与可观察对象异步加载的对象的属性.

这就是我想要的,但不起作用:

 <ion-item *ngIf="user$.anonymouse | async">
     <ion-label>Login</ion-label>
 </ion-item>

//EDIT:使用上面的代码时出现此错误

异常:在[!user$.anonymouse | async in]中管道"AsyncPipe"的参数"true"无效SettingsPage@27:22]

有没有办法解决这个问题?

我知道我可以在Ctrl中订阅这个观察值,将值存储到正常变量中,但我不想这样做,因为性能等原因.

推荐答案

这个错误非常准确,因为*ngIf指令预期为truefalse,并使用结果表达式来确定是否在DOM中呈现HTML元素.

异常:在[!user$.anonymouse | async in]中管道"AsyncPipe"的参数"true"无效SettingsPage@27:22]

您拥有的表达式是user$.anonymouse,其计算结果为truthy,但不幸的是,您不能将async管道与此指令一起使用.async管道"转换"(也称为"管道")输入,例如在*ngFor指令的范围内公开结果输出.

管道需要三种可能的类型之一,定义如下(detailed about AsyncPipe):

transform(obj: Observable<any>| Promise<any>| EventEmitter<any>)

有没有办法解决这个问题?

是的,你可以按照设计使用它.例如,在*ngFor指令中:

<ion-item *ngFor="(user$ | async)?.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>

或者您可以完全移除管道,因为*ngIf指令不需要:

<ion-item *ngIf="user$.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>

Angular相关问答推荐

自动完成搜索过滤器不适用于Angular 中动态添加的输入字段

Angular路由不响应子路由的子路由

从Observatory的订阅方法外正确接收JSON数据

Primeng 12Angular 12自定义库:错误符号字段集声明于...在编译保存后未从Primeng/fieldset中导出

如何包装NGB carousel ?

有Angular react 形式的输入用货币管

Component RegisterComponent模板出现Angular 错误

带区域设置用法的Angular 日期管道

是否可以在Angular(12+)中迭代指定的范围而不是整个数组

合并Cypress和Karma的代码覆盖率报告JSON文件不会产生正确的结果

ngRouterOutlet和组件生命周期使用自定义模板渲染的问题

完成行为主体

如何在 Angular14 中创建带有验证的自定义输入组件?

Angular APP_INITIALIZER 中的 MSAL 身份验证

Storybook 和 Angular 交互游戏测试未定义预期

当父组件上的变量发生变化时重新加载子组件

在 Angular 4 中播放声音

Angular2 中的providers提供者是什么意思?

在 Angular 2 中打印 Html 模板

Angular 2 中的 OnChanges 和 DoCheck 有什么区别?