Description
From @chrisvor on July 15, 2017 5:47
Did you verify this is a real problem by searching [Stack Overflow]
Yes, I could not find something related
Tell us about the problem
When I use a SegmentedBar component INSIDE a ListView (i.e. as part of the template definition), when the ListView is first displayed everything is normal. As soon as I try to scroll down, at the moment that a new listview row is about to be shown, the app crashes with an error:
"Error: View already has a parent. View: [object Object] Parent: SegmentedBar(252)".
I suspect this has something to do with the recycling functionality that exists in the ListView control, and somehow when the new row is about to be displayed by recycling the one just gone off the screen, the SegmentedBar control that was inside the "old" instance is not properly "cleared" so that a new parent can be assigned to it, hence the error.
Which platform(s) does your issue occur on?
iOS
Android not tested
Please provide the following version numbers that your issue occurs with:
- CLI: 3.1.1
- Cross-platform modules: 3.1.0
- Runtime(s): IOS: 3.1.0, Android: 3.1.1
- Plugin(s):
"dependencies": {
"angular/animations": "~4.1.0",
"angular/common": "~4.1.0",
"angular/compiler": "~4.1.0",
"angular/core": "~4.1.0",
"angular/forms": "~4.1.0",
"angular/http": "~4.1.0",
"angular/platform-browser": "~4.1.0",
"angular/router": "~4.1.0",
"nativescript-angular": "^3.1.1",
"nativescript-couchbase": "^1.0.18",
"nativescript-theme-core": "^1.0.4",
"reflect-metadata": "~0.1.8",
"rxjs": "^5.4.2",
"tns-core-modules": "^3.1.0",
"zone.js": "~0.8.2"
}
(note: in the list above I removed the "@" prefix on the "angular" dependencies as it wasn't showing in this post)
Please tell us how to recreate the issue in as much detail as possible.
Just populate the items array with more than what would fit on the screen and scroll the listview
Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.
<ListView [items]="recipe" class="list-group">
<ng-template let-ingr="item" let-i="index">
<GridLayout rows="*" columns="*,200" width="500" class="list-group-item" [id]="i" [class.disabled]="ingr.avl==0" [visibility]="ingr.avl>0 ? 'visible' : 'collapsed'">
<Label [text]="ing(ingr.iid,'dsc')" fontsize="12" fontweight="bold" backgroundcolor="#ffffff" row="0" col="0" style="text-align:left"></Label>
<SegmentedBar #optbar [items]="ingr.optOptions" [selectedIndex]="ingr.optSel" (selectedIndexChange)="onOptSel($event, i)" row="0" col="1"></SegmentedBar>
</GridLayout>
</ng-template>
</ListView>
Copied from original issue: NativeScript/NativeScript#4556