Angular свойство async pipe и object

Мне нужно использовать async-канал без ngFor. Мне нужно проверить свойство объекта, который асинхронно загружается с наблюдаемым.

Это то, что я хочу, но не работаю:

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

//EDIT: я получаю эту ошибку, когда использую код выше

ИСКЛЮЧЕНИЕ: неверный аргумент 'true' для канала 'AsyncPipe' в [! user $.anonymouse | async в SettingsPage @27: 22]

Есть ли способ решить это?

Я знаю, что могу подписаться на это наблюдаемое в Ctrl значение хранилища в обычную переменную, но я не хочу этого делать из-за производительности и т.д.

Ответы

Ответ 1

Ошибка на удивление точна, так как директива *ngIf ожидает true или false и использует полученное выражение для определения того, следует ли отображать элемент HTML в DOM.

ИСКЛЮЧЕНИЕ: неверный аргумент 'true' для канала 'AsyncPipe' в [! user $.anonymouse | async в SettingsPage @27: 22]

У вас есть выражение user$.anonymouse, которое оценивается как правдивое, но, к сожалению, вы не можете использовать трубу async с этой директивой. Труба async "преобразует" (также называемую "трубами" ) вход, отображающий результирующий вывод в рамках директивы *ngFor, например.

Труба ожидает один из трех возможных типов, определенных ниже (подробно о AsyncPipe):

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

Есть ли способ решить это?

Да, вы можете использовать его, как он был разработан. Например, в директиве *ngFor:

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

Или вы можете полностью удалить трубопровод, поскольку он не нужен для директивы *ngIf:

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

Ответ 2

Как указано в комментариях @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>`

Ниже приведен рабочий пример .