ngFor and ngIf together, Angular2, Ionic2

Question

I am trying to display list of options using ngFor but only fulfilling certain condition, is it possible to use ngFor and ngIf together to achieve that? Something like this:

<ion-select [(ngModel)]="task">
    <ion-option *ngFor="let task of tasks" [value]="task" *ngIf="task.ProjectId == project.Id">{{task.Title}}</ion-option>
  </ion-select>

did my answer fix your problem or do you need some additional help? If it fixed your problem, could you mark my answer as accepted? — Mike Bovenlander, Apr 25 '17 at 13:19

score 46 · Accepted Answer · answered Apr 25 '17 at 08:20

46

*ngFor and *ngIf cannot be used together on the same element.

What you can do is use an ng-container.

<ng-container> is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node.

<ng-container> is rendered as an HTML comment.

<ion-select [(ngModel)]="task">
    <ng-container *ngFor="let task of tasks">
        <ion-option [value]="task" *ngIf="task.ProjectId == project.Id">{{task.Title}}</ion-option>
    </ng-container>
</ion-select>

answered Apr 25 '17 at 08:20

Mike Bovenlander

5,236
5
28
47

Interesting, I'll have to test that out – Alex Beugnet Apr 25 '17 at 08:21
this answer might be correct but somehow this isn't working for me, there are no errors, but there is also nothing showing up – Apr 26 '17 at 07:28
1

fixed this, now i am 100% sure this is working – Apr 26 '17 at 10:14

*ngFor and *ngIf together, Angular2, Ionic2

1 Answers1

ngFor and ngIf together, Angular2, Ionic2