Comment gérer les observables booléens avec le canal asynchrone dans Angular

Question

J'ai le code suivant:

public obs$: Observable<boolean>

<div *ngIf="(obs$ | async) === true || (obs$ | async) === false">
  {{ (obs$ | async) ? 'yes' : 'no' }}
</div>

Cela fonctionne comme prévu, mais le if semble un peu bavard.

Le problème est que je ne peux pas simplement faire <div *ngIf="(obs$ | async)">. Si j'essaye, cela fonctionnera dans le cas où l'observable n'a pas encore émis de valeur ou si la valeur est vraie, mais cela ne fonctionnera pas si la valeur est fausse, car le if sera évalué à faux et le div ne l'est pas. affiché.

Je suppose que le même problème s'applique si une valeur falsifiée est retournée, telle qu'une chaîne vide ou 0.

Y a-t-il un moyen meilleur et plus simple de le faire?

Answer 1

Je pense que la façon la plus élégante devrait être de créer un BoolPipe personnalisé ， et de le chaîner après le tuyau asynchrone。

@Pipe({name: 'myBool'})
export class MyBoolPipe implements PipeTransform {
  transform(value: boolean, exponent: string): string {
    return !value ? 'yes' : 'no';
  }
}

et initiez l'obj $ dans le constructeur de votre composant ou service (ne nécessite pas de vérification nulle dans votre modèle HTML), puis enchaînez-le avec un canal asynchrone comme ceci:

<div>{{ obs$ | async | myBool }}</div>