NativeScript + Angular - Listview with SegmentedBar inside template

#1

I’m trying to implement a screen with a listview that the user will use to select several options.Each “item” can have 1 of 3 options selected, so I thought the most appropriate component to use was the “SegmentedBar” component.

The listview displays perfectly but once you scroll and a new item is about to become visible I get the error "Error: View already has a parent. View: [object Object] Parent: SegmentedBar(252).

I suppose this is happening due to the template recycling happening, but have no idea how to solve it… Any ideas/guidance?

Code fragment:
<ListView [items]=“recipe” class=“list-group”>

<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”>
<SegmentedBar #optbar [items]=“ingr.optOptions” [selectedIndex]=“ingr.optSel” (selectedIndexChange)=“onOptSel($event, i)” style=“align-content: right” row=“0” col=“1”>


#2

The code fragment was cut off… Correct one:
<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'">
            <!--<Image [src]="imageUrl + prod.img" row="0" col="0" colSpan="2"></Image>-->
            <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)" style="align-content: right" row="0" col="1"></SegmentedBar>
        </GridLayout>
    </ng-template>
</ListView>
#3

I am using SegmentedBar in my quicknoms app, also a Recipes app: http://www.github.com/jlooper/quicknoms-app - maybe you can use pointers from this?

#4

Many thanks for the fast response! Much appreciated. WIll check it out and let you know! Again thanks :slight_smile:

#5

Jen, I checked your app, although it does not build due to an error relating to the entitlements, I saw the recipe-detail.component.html where you use the SegmentedBar. However it is not used inside a LISTVIEW, it is inside a SCROLLVIEW… Even in a ListView it functions ok for all the items that are visible as soon as you enter the page. However when you just try to scroll past the end of the screen so that a new row starts showing up, I get the error I described in my post.
I suspect it is due to the listview being “optimized” and recycling the template just gone off the screen on the top side, and the SegmentedBar (which is a CHILD component) not properly being handled and added to the “new” parent (the newly recycled row) hence the error.
I just cannot find a way to fix this, or maybe it’s a bug in NS ?
Thanks again :slight_smile:

#6

ugh the entitlement thing is new with Firebase on emulator, sorry about that, you’re right.

ohhh I see what you are saying about listview. Yes, I tend to use card type layouts in my apps because I like more styling control.

I think you should write up an issue on the {N} repo. Are you ok w/ doing that? Include as much info as you can so they can reproduce the error.

thanks!

#7

Quite newbie on NS, although a veteran developer :slight_smile: Any pointers how to go about that?

#8

hi, open an issue here: https://github.com/NativeScript/NativeScript/issues

There’s a readme about the things they need from you to properly address the issue. First thing is also to sift through other issues and see if yours is already there.

thanks!
Jen

#9

Thanks Jen, Just opened issue #4556 in the repo
Christos