web-dev-qa-db-fra.com

Angular * ngIf avec plusieurs conditions de canal asynchrone)

Il y a un très bon document sur l'utilisation de * ngIf dans Angular: https://angular.io/api/common/NgIf Mais, est-il possible d'avoir une variable asynchrone * ngIf et plusieurs vérifications à ce sujet? Quelque chose comme:

<div *ngIf="users$ | async as users && users.length > 1">
...
</div>

Bien sûr, il est possible d'utiliser nested * ngIf, comme:

<div *ngIf="users$ | async as users">
    <ng-container *ngIf="users.length > 1">
    ...
    </ng-container>
</div>

mais ce serait vraiment bien d'utiliser un seul conteneur, pas deux.

angularangular-ng-if
8
Vitaly

Faites-le simplement comme ça

<div *ngfor="let user of users$ | async" *ngIf="(users$ | async)?.length > 1">...</div>

Pour un scénario "plus complexe", procédez comme suit

<div  *ngfor="let user of users$ | async" *ngIf="(users$ | async)?.length > 1 && (users$ | async)?.length < 5">...</div>

Edit: Previous ne fonctionnerait pas car vous ne pouvez pas utiliser *ngFor et *ngIf sans utiliser ng-template . Vous le feriez comme ça par exemple

<ng-template ngFor let-user [ngForOf]="users$ | async" *ngIf="(users$ | async)?.length > 1 && (users$ | async)?.length < 5">
  <div>{{ user | json }}</div>
</ng-template>

Voici un stackblitz .

5
alsami

J'ai rencontré le même problème d'avoir besoin d'une variable async * ngIf + avec plusieurs vérifications.

Cela a fini par bien fonctionner pour moi.

<div *ngIf="(users$ | async)?.length > 0 && (users$ | async) as users"> ... </div>

ou si vous préférez

<div *ngIf="(users$ | async)?.length > 0 && (users$ | async); let users"> ... </div>

Explication

Comme le résultat de l'expression if est affecté à la variable locale que vous spécifiez, la simple fin de votre vérification par ... && (users$ | async) as users vous permet de spécifier plusieurs conditions et spécifiez la valeur que vous souhaitez que la variable locale contienne lorsque toutes vos conditions réussissent.

Remarque

Au départ, je craignais que l'utilisation de plusieurs tubes async dans la même expression puisse créer plusieurs abonnements, mais après quelques tests légers (je peux me tromper), il semble qu'un seul abonnement soit réellement effectué.

2
Keego