角，IF語句模板

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）。我嘗試過，但沒有奏效。

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爲

<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> 

其中*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)