ListView + StackLayout + loadMoreItems has funky results


#1

The following code produces odd results. When scrolling down and triggering the loadMoreItems(), the label item is recycled and holds onto the width of the previous value that was in the label, thus cutting off any text that is longer than the original. When I swapped out the StackLayout for GridLayout, it worked. Anyone know why StackLayout behaves this way in the ListView? Or a workaround where I can still use StackLayout? In my real app there is more than just one label in the listview, there are images and other labels so getting rid of the layout altogether will not work.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: "my-app",
  template: `
  <ListView [items]="itemList" (loadMoreItems)="loadMoreItems()">
  <ng-template let-item="item" let-i="index">
  <StackLayout orientation="horizontal">
  <Label [text]="item.Username"></Label>
  </StackLayout>
  </ng-template>
  </ListView>
  `
})
export class AppComponent {
  itemList: any;

  loadMoreItems(){
    for(var i=0;i<20;i++){
      this.itemList.push(new Object({Username: "Christopher"}));
    }
  }

  ngOnInit() {
    this.itemList = [];
    for(var i=0;i<30;i++){
      this.itemList.push(new Object({Username: "Jon"}));
    }
  }
}