New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ListView template's child components aren't updated #612

Closed
jzgoda opened this Issue Dec 29, 2016 · 3 comments

Comments

Projects
None yet
2 participants
@jzgoda

jzgoda commented Dec 29, 2016

I ran into a weird issue with a ListView who's template had a child component. When I started scrolling down and back up in the ListView, the child components started to change which parent template they were associated with.

I made a sample app to illustrate this problem.
(There's an animated GIF in the README that shows the odd behavior.)

I attempted to move the template code into it's own component, which didn't solve this issue. (I read that solved another, somewhat similar, issue.)

This child component has an @Input which is passed to it by the parent template, and then OnInit sets a instance variable based on that data.

export class SubComponentComponent implements OnInit {
	@Input() myItem: number;
	count: number = 0;

	ngOnInit(): void {
		this.count = this.myItem;
	}
}

It's the OnInit that seems to be the issue, or rather the wrong solution, and an OnChanges should be used here. Once I switched to OnChanges, I was able to pass the currentValue of the changed @Input to the instance variable, and all was good. (I posted that commit to the above repo as well.)

export class SubComponentComponent implements OnChanges {
	@Input() myItem: number;
	count: number = 0;

	ngOnChanges(changes: SimpleChanges) {
		this.count = changes['myItem'].currentValue;
	}
}

I'm wondering if this is a bug, or just something that needs to be documented? It certainly wasn't obvious to me that a ListView template component's children could become associated with another component. (Although I can guess that this has to do with the reuse of allocated visual elements, but still figured that it would trickle down to child components.)

Let me know if there is anything else you need me to provide.

@NickIliev

This comment has been minimized.

Member

NickIliev commented Dec 30, 2016

Hey @jzgoda thank you for your project and great explanations of the issue you have encountered - indeed I think this is a good addition for a documentation article or sdk example.

The solution with using onChanges is the way to go when you want watch the immutable input in your child component. Great blog post on that matter can be found here (the approach you have used is shown at the end of the article as the right solution for similar scenario)

@NickIliev NickIliev removed the os: ios label Dec 30, 2016

@jzgoda

This comment has been minimized.

jzgoda commented Dec 30, 2016

@NickIliev, thanks for clearing that up!
It definitely makes sense now.

@NickIliev

This comment has been minimized.

Member

NickIliev commented Jan 3, 2017

Example added in nativescript-sdk-examples-ng application via this PR. @jzgoda the sample will also appear in our documentation after the official release - once again thank you for noticing this one!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment