NativeScript error. More than one view found in list template

3
votes

I had such ListView

<ListView [items]="groceryList" row="1" class="small-spacing" [class.visible]="listLoaded">
    <template let-item="item" columns="*, auto" >
      <Label [text]="item.name" class="medium-spacing"></Label>      
    </template>
  </ListView>

I want to add image button. So I just added columns="*, auto" to template and col="0" to Label and col="1" to my Image

 <ListView [items]="groceryList" row="1" class="small-spacing" [class.visible]="listLoaded">
    <template let-item="item" columns="*, auto" >
      <Label [text]="item.name" class="medium-spacing" col="0"></Label>
      <Image src="res://delete" (tap)="delete(item.id)" col="1"></Image>      
    </template>
  </ListView>

After running an emulator I am getting an error:

enter image description here

Any thoughts why is that happening and how to fix that?

1
androidnativescriptangular2-nativescript
You should add StackLayout or GridLayout for main container inside the ListView template and inside the Layout to add the Image and the Label. For example <StackLayout><Label [text]="item.name" class="medium-spacing" ></Label> <Image src="res://delete" (tap)="delete(item.id)"></Image></StackLayout> - Nikolay Tsonev
@NikolayTsonev should I take out template ? - sreginogemoh
You do not have to remove the template , you should add the Layout inside of it - Nikolay Tsonev

1 Answers

11
votes

Only one element allowed innside <template>, you have two. Add a single GridLayout innside the <template> instead, then add you elements there.