web-dev-qa-db-ja.com

Angular * ngIf変数と非同期パイプの複数の条件

Angularで* ngIfを使用する非常に良いドキュメントがあります。 https://angular.io/api/common/NgIf しかし、* ngIf非同期変数とその複数のチェックを持つことは可能ですか？何かのようなもの：

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

もちろん、次のようなネストされた* ngIfを使用することもできます。

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

しかし、2つではなく1つのコンテナのみを使用するのは本当に素晴らしいことです。

angularangular-ng-if
8
Vitaly

こうやって

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

「より複雑な」シナリオでは、次のことを行います

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

Edit：ngを使用せずに*ngForおよび*ngIfを使用することはできないため、Previousは機能しません。 -テンプレート 。あなたはそのようにそれをするでしょう

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

これは stackblitz です。

5
alsami