{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/6057","labels_url":"https://api.github.com/repos/angular/angular/issues/6057/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/6057/comments","events_url":"https://api.github.com/repos/angular/angular/issues/6057/events","html_url":"https://github.com/angular/angular/issues/6057","id":123327818,"number":6057,"title":"binding to getter function that returns a new array with the same elements causes an exception in dev mode","user":{"login":"robianmcd","id":4347752,"avatar_url":"https://avatars.githubusercontent.com/u/4347752?v=3","gravatar_id":"","url":"https://api.github.com/users/robianmcd","html_url":"https://github.com/robianmcd","followers_url":"https://api.github.com/users/robianmcd/followers","following_url":"https://api.github.com/users/robianmcd/following{/other_user}","gists_url":"https://api.github.com/users/robianmcd/gists{/gist_id}","starred_url":"https://api.github.com/users/robianmcd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robianmcd/subscriptions","organizations_url":"https://api.github.com/users/robianmcd/orgs","repos_url":"https://api.github.com/users/robianmcd/repos","events_url":"https://api.github.com/users/robianmcd/events{/privacy}","received_events_url":"https://api.github.com/users/robianmcd/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-12-21T18:00:18Z","updated_at":"2015-12-21T20:28:05Z","closed_at":null,"body":"If I have a getter function in my component like this:\r\n\r\n```\r\ngetFilteredObjs() {\r\n    return this.objs.filter((obj) => {\r\n        //...\r\n    });\r\n}\r\n```\r\n\r\nAnd I bind to it like this:\r\n\r\n```\r\n<div *ngFor=\"#obj in getFilteredObjs()\">\r\n    ...\r\n</div>\r\n```\r\n\r\nThen I will get an \"Expression has changed after it was checked\" exception. I get that this is happening because in dev mode angular will call the function a second time and it will return a different array instance on each call. What is the best way to avoid this exception? I've come up with the following solutions but I'm wondering if there is a simpler way.\r\n\r\n1. I assume I could solve this with a custom pipe but that feels like a bit of over kill if the filtering logic is simple and only used in one component.\r\n\r\n2. I could watch all the events that might cause the output of this function to change and manually update some extra state on my controller that would store the filtered objects.However that would require more state and potentially a lot more code if there were a lot of events that might change the array of objects being filtered.\r\n\r\n3. I could use something like underscore to memoize the function and return the same instance of an array if the inputs haven't changed. This seems like a leaky abstraction though so I'd rather not have to do that.\r\n\r\nAny other ideas? Or is one of the ideas I've mentioned my best bet?"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/166409016","html_url":"https://github.com/angular/angular/issues/6057#issuecomment-166409016","issue_url":"https://api.github.com/repos/angular/angular/issues/6057","id":166409016,"user":{"login":"robianmcd","id":4347752,"avatar_url":"https://avatars.githubusercontent.com/u/4347752?v=3","gravatar_id":"","url":"https://api.github.com/users/robianmcd","html_url":"https://github.com/robianmcd","followers_url":"https://api.github.com/users/robianmcd/followers","following_url":"https://api.github.com/users/robianmcd/following{/other_user}","gists_url":"https://api.github.com/users/robianmcd/gists{/gist_id}","starred_url":"https://api.github.com/users/robianmcd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robianmcd/subscriptions","organizations_url":"https://api.github.com/users/robianmcd/orgs","repos_url":"https://api.github.com/users/robianmcd/repos","events_url":"https://api.github.com/users/robianmcd/events{/privacy}","received_events_url":"https://api.github.com/users/robianmcd/received_events","type":"User","site_admin":false},"created_at":"2015-12-21T20:28:05Z","updated_at":"2015-12-21T20:28:05Z","body":"The nice thing about the original code where the getter is called from the view is that there is only a single source of truth. The `this.filteredObjs` field is just generated from other state fields so storing it separately opens up the potential for inconsistencies within the component's state.\r\n\r\nAnyway thanks for the feedback. Just wanted to make sure there wasn't some feature of Angular that I was totally missing. I haven't used pipes before so maybe I'll try refactoring the `getFilteredObjs()` function into a \"pure\" pipe and see if that solves the change detection issue without loosing the single source of truth."}}