ListView rendering bug on 1.2.0 aswell as @next

[m-abs]

We experience some very odd rendering issues with ListViews in the lastest next version of nativescript-angular (all 1.3.0-2016 untill at least 1.3.0-2016-11-30-1112).

I've recorded a demo video here:
https://github.com/m-abs/angular2-seed-advanced/blob/ng2-list-view-bug/bug-video.mkv?raw=true

As you can see in the video:

• I've a small ListView (at the bottom of the HomeComponent) each item have a title and one of the items have a now_playing-icon to the right.
• I navigate to another page.
• And click the back-button, so I end up at the first page again.
• When I click back to the first page.* Now the ListView is suddenly just the icon.

The template can be seen here: https://github.com/m-abs/angular2-seed-advanced/blob/ng2-list-view-bug/src/client/app/components/home/home.component.tns.html#L17-L24
The data for the listview can be seen here: https://github.com/m-abs/angular2-seed-advanced/blob/ng2-list-view-bug/src/client/app/components/home/home.component.ts#L30-L50

I think it happens because there is an element with *ngIf under the ListView-template.
It seems that the first element with *ngIf gets rendered as the whole item-view, even if the truthiness value is false.
In my example I used an Image-element, but if I replace it with a Label, the Label is rendered on all the ListView-items. and if I add two elements only the first of them is rendered. Regardless of the *ngIf value.

Whole demo project is here: https://github.com/m-abs/angular2-seed-advanced/tree/ng2-list-view-bug

[m-abs]

We've just tried to update our project to angular 2.2.4 and nativescript-angular-1.2.0 and this bug is still there.

[m-abs]

I've written a simpler example here: https://github.com/m-abs/ns-debugging/tree/ng2-list-view

My setup:
NodeJS: 7.1.0
TNS: 2.4.0
NativeScript-angular: 1.2.0
tns-android: 2.4.1
Android: 6.0

[m-abs]

I think, I've found a workaround:
https://github.com/m-abs/ns-debugging/blob/ng2-list-view/app/home/home.component.html#L13-L17
https://github.com/m-abs/ns-debugging/blob/ng2-list-view/app/home/home.component.ts#L13-L44

Moving ListView items into a separate ItemComponent seems to solve the problem.

[ddfreiling]

I've just run into the same issue with latest nativescript-angular using *ngIf in a listview template. Thanks @m-abs for workaround 👍 , but a proper fix is definitely needed.

[CodeXtinction]

yes, i removed *ngIf works well now

[m-abs]

If you move the item content template to its own component the problem should go away.
That's how we got around it.

The problem should be fixed (they closed my issue with a pull request), but it haven't been released yet, so for now try moving it to a separate component.

[CodeXtinction]

@m-abs ok, thanks bro :P

[vakrilov]

@m-abs Thanks for reporting this issue. Indeed the problem was that the ListView was "picking" the template of the *ngIf and started rendering the items with it, instead of its original template.
Good news is that this is fixed now and available in the @next builds.