Can't use ngFor with ngIf

Question

Use Angular 2

When i do it:

<ul>
    <template *ngFor="let flag of [1,2,3,4]">
        <li  *ngIf="flag == 1">
            some data
        </li>
    </template>
</ul>

I get it

<ul>
    <!--template bindings={
      "ng-reflect-ng-for-of": "1,2,3,4"
    }-->
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
    <!--template bindings={}-->
</ul>

And it display nothing. I need to display <li> in *ngFor only when item.flagsExplain[flag] is set

Please give a [mcve] that includes the inputs to this. – jonrsharpe May 03 '17 at 14:22 — jonrsharpe, May 03 '17 at 14:22
Updated the question – Denis Ostrovsky May 03 '17 at 14:26 — Denis Ostrovsky, May 03 '17 at 14:26
But where are the *inputs*? What is `item`? `service`? – jonrsharpe May 03 '17 at 14:37 — jonrsharpe, May 03 '17 at 14:37

Tiep Phan · Accepted Answer · 2017-05-03T14:31:24.010

for syntactic sugar:

<ul>
    <ng-container*ngFor="let flag of service.flagsCount()">
        <li  *ngIf="item.flagsExplain[flag]">
            {{ service.flagLabel(flag) }}
            <b *ngIf="item.flagsExplain[flag] != 1">
                : {{ item.flagsExplain[flag] }}
            </b>
        </li>
    </ng-container>
</ul>

if you wanna using template tag, you need using this form:

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

and in Angular 4:

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

so your code will look like this:

<ul>
    <template ngFor let-flag [ngForOf]="service.flagsCount()">
        <li  *ngIf="item.flagsExplain[flag]">
            some data
        </li>
    </template>
</ul>

p/s: replace template tag with ng-template in Angular 4.

document here: https://angular.io/docs/ts/latest/api/common/index/NgForOf-directive.html

please take a look my updated answer. – Tiep Phan May 03 '17 at 14:31 — Tiep Phan, May 03 '17 at 14:31

Can't use *ngFor with *ngIf

1 Answers1

Can't use ngFor with ngIf