change - content angular 6

Tubería asíncrona angular y propiedad de objeto.

Question

Necesito usar tubería asíncrona sin ngFor. Necesito verificar la propiedad del objeto que está asíncrono cargado con observable.

Esto es lo que quiero, pero no funciona:

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

// EDITAR: Recibo este error cuando uso el código anterior

EXCEPCIÓN: Argumento no válido ''verdadero'' para la tubería ''AsyncPipe'' en [! User $ .anonymouse | async en SettingsPage @ 27: 22]

¿Hay alguna manera de resolver esto?

Sé que puedo suscribirme a este observable en Ctrl y almacenar los valores en una variable normal, pero no quiero hacerlo, debido al rendimiento, etc.

Answer 1

Como se indica en los comentarios de @Sean, su declaración *ngIf debe basarse en la propiedad de objeto resultante anonymouse del user$ objeto que se devuelve. Como tal:

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

Esto me funcionó y aquí hay un ejemplo de cómo usar los resultados de la siguiente tubería:

Componente

 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);
  }

Ver

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

Un ejemplo de trabajo se puede encontrar here .

Answer 2

Creo que esto también podría ser útil:

<!-- This is needed to wait for async pipe to resolve -->
<div *ngIf="user$ | async as user"> 

   <!-- Only on resolve of async pipe -->
   <ion-item *ngIf="user.whateverPropertyYouWantToCheck">
        <ion-label>Login</ion-label>
    </ion-item>
</div>

Tenga en cuenta que si cambié de user$ a user , puede usar el mismo nombre de variable si lo desea, pero esto deja más claro que ya no es un conducto asíncrono.

Answer 3

El error es sorprendentemente preciso ya que la directiva *ngIf espera que sea true o false y utiliza la expresión resultante para determinar si se debe representar o no el elemento HTML en el DOM.

EXCEPCIÓN: Argumento no válido ''verdadero'' para la tubería ''AsyncPipe'' en [! User $ .anonymouse | async en SettingsPage @ 27: 22]

La expresión que tiene es user$.anonymouse que se evalúa como verdadera, pero desafortunadamente no puede usar el conducto async con esta directiva. La tubería async "transforma" (también conocida como "tuberías") la entrada que expone la salida resultante dentro del alcance de la directiva *ngFor , por ejemplo.

La tubería espera uno de los tres tipos posibles, que se definen a continuación ( detallados sobre AsyncPipe ):

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

¿Hay alguna manera de resolver esto?

Sí, puedes usarlo como fue diseñado. Por ejemplo, en una directiva *ngFor :

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

O puede eliminar la tubería por completo, ya que no es necesaria para la directiva *ngIf :

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