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

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

模板中的Angular，IF语句

3 个答案: