、テンプレート

Question

内のステートメントは、私はテンプレートにこのコードをお持ちの場合：

<div *ngFor="let user of users | async" class="beacon-label me" [ngStyle]="{ 'top':user.posY+'px', 'left':user.posX+'px' }" > 
     <div class="userId"><p>{{user.$key}}</p></div> 
</div> 

このコードは、すべてのユーザーを示しているが、私はいくつかの特定の属性（15歳未満の年齢を持つユーザ）をユーザーに表示したくありません。私はngIfを試みたが、それは仕事をしなかった。

Answer 1

<div *ngFor="let user of users | async" class="beacon-label me" [ngStyle]="{ 'top':user.posY+'px', 'left':user.posX+'px' }" > 
     <div class="userId" 
      *ngIf="user.age < 15"> <!-- Change age with appropriate user key you are looping --> 
       <p>{{user.$key}}</p> 
     </div> 
</div> 

Answer 2

その

<ng-template ngFor let-user [ngForOf]="users | async"> 
    <div class="beacon-label me" [ngStyle]="{ 'top':user.posY+'px', 'left':user.posX+'px' }" > 
     <div *ngIf="user.age < 15" class="userId"><p>{{user.$key}}</p></div> 
    </div> 
</ng-template> 

に使用ng-template*ngIfがある - あなたの述語を置きます。

Answer 3

filterをusers Observableに置く方が簡単でした。 Observableによって提供されるパワーを利用する。

//Assuming getUser method is method of userService returns `Observable` 
this.users = this.userService.getUser().filter(user => user.age < 15)