{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/771","repository_url":"https://api.github.com/repos/NativeScript/nativescript-angular","labels_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/771/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/771/comments","events_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/771/events","html_url":"https://github.com/NativeScript/nativescript-angular/issues/771","id":225132684,"number":771,"title":"Custom component in Listview are not processed when the Listview is scrolled ","user":{"login":"kofrimpong","id":4720269,"avatar_url":"https://avatars3.githubusercontent.com/u/4720269?v=4","gravatar_id":"","url":"https://api.github.com/users/kofrimpong","html_url":"https://github.com/kofrimpong","followers_url":"https://api.github.com/users/kofrimpong/followers","following_url":"https://api.github.com/users/kofrimpong/following{/other_user}","gists_url":"https://api.github.com/users/kofrimpong/gists{/gist_id}","starred_url":"https://api.github.com/users/kofrimpong/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kofrimpong/subscriptions","organizations_url":"https://api.github.com/users/kofrimpong/orgs","repos_url":"https://api.github.com/users/kofrimpong/repos","events_url":"https://api.github.com/users/kofrimpong/events{/privacy}","received_events_url":"https://api.github.com/users/kofrimpong/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-04-28T16:35:20Z","updated_at":"2017-07-25T00:07:38Z","closed_at":null,"body":"Which platform(s) does your issue occur on?\r\n\r\nUsing  Android\r\n\r\nPlease provide the following version numbers that your issue occurs with:\r\n\r\n\"tns-core-modules\": \"2.5.2\"\r\n\"tns-android\": {\r\n      \"version\": \"2.5.0\"\r\n    }\r\nPlease tell us how to recreate the issue in as much detail as possible.\r\n\r\nHere is my listview\r\n\r\n```html\r\n<ListView #myListView row=\"0\" [items]=\"items\" (loadMoreItems)=\"onLoadMoreItemsRequested()\">\r\n        <ng-template let-item=\"item\" let-myIndex=\"index\">\r\n           <GridLayout rows=\"*\" columns=\"auto,*\" class=\"list-item\" [id]=\"item.id\" (tap)=\"onItemTap($event)\" (longPress)=\"onItemSelected($event)\"\r\n                [class.read]=\"item.is_read\" [class.selected]=\"item._selected\">\r\n                <StackLayout col=\"0\" orientation=\"vertical\" horizontalAlignment=\"center\" marginRight=\"20\" [visibility]=\"!item._selected ? 'visible' : 'collapsed'\">\r\n                   <LetterAvatar date=\"{{item.getAvatarDate()}}\" customStyle=\"padding-top:5\" fontsize=\"13\"></LetterAvatar>\r\n                </StackLayout>\r\n                <StackLayout col=\"0\" orientation=\"vertical\" horizontalAlignment=\"center\" marginRight=\"20\" [visibility]=\"item._selected ? 'visible' : 'collapsed'\">\r\n                    <Image src=\"res://checked\" width=\"50\" height=\"50\" stretch=\"aspectFill\"></Image>\r\n                </StackLayout>\r\n                <StackLayout col=\"1\" orientation=\"vertical\">\r\n                    <Label class=\"nameLabel\" text=\"{{item.getTitle()}}\"></Label>\r\n                    <Label class=\"descriptionLabel\" text=\"Received on: {{ item.transact_date | jsdate | date:'dd MMM y' }}\"></Label>\r\n                    <Label class=\"extralabel\" text=\"Amount: {{item.getFormattedAmount()}}\"></Label>\r\n                </StackLayout>\r\n            </GridLayout>\r\n        </ng-template>\r\n    </ListView>\r\n```\r\nHere is a scaled down version of the custom component LetterAvatar\r\n\r\n```javascript\r\n@Component({\r\n    selector: 'LetterAvatar',\r\n    template: '<Label [text]=\"data\" textWrap=\"true\" [height]=\"height\" [width]=\"width\" [style]=\"style\"></Label>'\r\n})\r\nexport class LetterAvatar implements OnInit {\r\nngOnInit() {\r\n//set data variable for label text\r\n//log something\r\nconsole.log('ngOnit evaluated');\r\n}\r\n}\r\n```\r\nThe ngOnit is evaluated for the initial list items that covers the screen. When you scroll down the list, the listview uses a chached version of LetterAvatar from the previous screen, meaning the ngOnit is not evaluated.\r\nSo if the initial screen has about 10 items, for the next items starting from say 12, the first 10 LetterAvatar is repeated for the next 10 items i.e 12-22\r\n\r\nSo in my case, the `text` property of the label in LetterAvatar does not evaluate."},"comment":{"url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/comments/317590033","html_url":"https://github.com/NativeScript/nativescript-angular/issues/771#issuecomment-317590033","issue_url":"https://api.github.com/repos/NativeScript/nativescript-angular/issues/771","id":317590033,"user":{"login":"chrisbellman","id":4149988,"avatar_url":"https://avatars3.githubusercontent.com/u/4149988?v=4","gravatar_id":"","url":"https://api.github.com/users/chrisbellman","html_url":"https://github.com/chrisbellman","followers_url":"https://api.github.com/users/chrisbellman/followers","following_url":"https://api.github.com/users/chrisbellman/following{/other_user}","gists_url":"https://api.github.com/users/chrisbellman/gists{/gist_id}","starred_url":"https://api.github.com/users/chrisbellman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrisbellman/subscriptions","organizations_url":"https://api.github.com/users/chrisbellman/orgs","repos_url":"https://api.github.com/users/chrisbellman/repos","events_url":"https://api.github.com/users/chrisbellman/events{/privacy}","received_events_url":"https://api.github.com/users/chrisbellman/received_events","type":"User","site_admin":false},"created_at":"2017-07-25T00:07:38Z","updated_at":"2017-07-25T00:07:38Z","body":"@kofrimpong were you ever able to resolve this? Having a similar issue now. Happens on both Android and iOS."}}
{"actor":{"display_login":"chrisbellman"}}