Question

我需要在没有ngFor的情况下使用异步管道。我需要检查与observable异步加载的对象的属性。

这就是我想要的，但不起作用：

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

//编辑：当我使用上面的代码

时出现此错误

异常：无效的参数＆＃39; true＆＃39; for pipe＆＃39; AsyncPipe＆＃39;在[！user $ .anonymouse |设置页面中的异步@ 27：22]

有什么方法可以解决这个问题吗？

我知道我可以在Ctrl中将这个observable订阅商店值变成普通变量，但我不想这样做，因为性能等。

Answer 1

正如@Sean的评论中所述，您的*ngIf语句应该基于返回的anonymouse对象的结果对象属性user$。就这样：

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

这对我有用，这是一个如何使用下面管道结果的例子：

组件

 message$: Observable<{message: string}>;

  private messages = [
    {message: 'You are my hero!'},
    {message: 'You are the best hero!'},
    {message: 'Will you be my hero?'}
  ];

  constructor() { this.resend(); }

  resend() {
    this.message$ = Observable.interval(500)
      .map(i => this.messages[i])
      .take(this.messages.length);
  }

视图

<h2>Async Hero Message and AsyncPipe</h2>
<p>Message: {{ (message$ | async)?.message }}</p>
<button (click)="resend()">Resend</button>`

可以找到一个工作示例here。

Answer 2

错误非常准确，因为*ngIf指令需要true或false，并使用生成的表达式来确定是否在DOM中呈现HTML元素

EXCEPTION：[！user $ .anonymouse |中的管道'AsyncPipe'的参数'true'无效设置页面中的异步@ 27：22]

您拥有的表达式user$.anonymouse评估为真实，但遗憾的是您不能将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>

Answer 3

我认为这也可能有用：

nullable

请注意，我从 <div *ngIf="user$ | async as user">  <ion-item *ngIf="user.whateverPropertyYouWantToCheck"> <ion-label>Login</ion-label> </ion-item> </div>切换到user$，如果愿意，可以使用相同的变量名，但这可以使您清楚地知道它不再是异步管道。

Answer 4

isAnonymouse$ = user$.pipe(map(user => user?.anonymouse));

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

角度异步管道和对象属性

4 个答案:

组件

视图