NgFor with NgIf does not produce the correct results (Beta1)

I am using NgFor on a <template> tag to render list items. Every iteration renders a list item. In addtion, every other iteration should render another list item (for every even index number, conditional with NgIf).

Have a look at this: http://codepen.io/tine2k/pen/ZQLZav?editors=001
Reproduce the bug by hitting the button several times and watch the wrong list item order. It should be "0, even number, 1, 2, even number, 3, 4, even number" and so on.

This works fine by hiding the list item using ngClass: http://codepen.io/tine2k/pen/bEqxBN?editors=001

What's really strange is that putting a space between the closing tags </li></template> on line 8 fixes the problem in http://codepen.io/tine2k/pen/ZQLZav?editors=001

Dude, what a fix! :)

Anyway, this still seems to be a real issue that has to be addressed.

Definitely!

Legendary way to approach bugs! Congrats =)
On 6 Jan 2016 22:20, "Peter Safranek" [email protected] wrote:

Definitely!

—
Reply to this email directly or view it on GitHub
#6304 (comment).

This one is even more janked in Beta.1: http://plnkr.co/edit/ZWiQqw3nR8xS1MRrpTry?p=info

@pe8ter

@pe8ter you can always use even or odd properties

<template ngFor #item [ngForOf]="items" #i="index" #isEven="even" #isOdd="odd">
   <li>{{i}}</li>
   <li>{{isEven ? 'This number is even' : 'This number is not even'}}</li>
   <li>{{isOdd ? 'This number is odd' : 'This number is not odd'}}</li>
</template>

This uses the internal NgFor properties and avoid the error message. But it is still weird that awful message when using some condition inside the <template> (probably it is related to nested <template>s?).

Are nested templates off limits?

@ericmartinezr

@ericmartinezr thanks for your help. In my real world example the if condition is more complex than even/odd. I simplified it to show the rendering bug.

@pe8ter

@pe8ter see #6380

Updated my codepen example to Beta1. Still broken.

Updated my codepen example to Beta2. Still broken.

Updated my codepen example to Beta3. Still broken.

Thanks for reporting!

fix(core): support `ngFor` that has an `ngIf` as last node

Updated my codepen example to Beta6. Still broken.

How to use *ngIf with odd and even?

Have you tried
#6304 (comment)
with
`*ngIf="odd"

@zoechi

@zoechi Thanks for that. It's working now =)

@tbosch

Confirmed fixed in 2.0.0.Beta8. Thanks for the fix @tbosch !

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

NgFor with NgIf does not produce the correct results (Beta1) #6304

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

NgFor with NgIf does not produce the correct results (Beta1) #6304

Description

Activity

pe8ter commented on Jan 6, 2016

tine2k commented on Jan 6, 2016

tine2k commented on Jan 6, 2016

pe8ter commented on Jan 6, 2016

gsans commented on Jan 6, 2016

pe8ter commented on Jan 9, 2016

ericmartinezr commented on Jan 9, 2016

pe8ter commented on Jan 9, 2016

tine2k commented on Jan 9, 2016

tine2k commented on Jan 10, 2016

tine2k commented on Jan 10, 2016

tine2k commented on Jan 30, 2016

tine2k commented on Feb 3, 2016

3 remaining items

tbosch commented on Feb 4, 2016

tine2k commented on Feb 15, 2016

warnerpinz commented on Feb 18, 2016

zoechi commented on Feb 18, 2016

warnerpinz commented on Feb 19, 2016

tine2k commented on Mar 3, 2016

angular-automatic-lock-bot commented on Sep 8, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions