Angular, IF-Anweisung in Vorlage

Question

ich diesen Code in Vorlage habe:

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

Dieser Code zeigt alle Benutzer, aber ich will nicht (mit dem Alter unter 15 Benutzer) mit einigen spezifischen Attributen Benutzer anzuzeigen. Ich habe versucht, aber es hat nicht funktioniert.

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

Verwendung ng-template für die

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

wo die *ngIf ist - Ihr Prädikat setzen.

Answer 3

Es wäre einfacher gewesen, filter über die users Observable zu setzen. Nutzen Sie die Leistung von Observable.

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