Angular 2, re-render компонента
Есть компонент AppComponent.
Есть сервис ApiService. У сервиса в конструкторе есть свойство this.pokemons = [] Компонент присваивает это свойство в своем конструкторе: this.pokemons = apiService.pokemons; Компонент через метод ngOnInit() асинхронно заполняет свойство-массив сервиса объектами: this.apiService.getPokemons().then(data => { data.objects.forEach((item) => { this.apiService.pokemons.push({ name : item.name, imgUrl: `http://pokeapi.co/media/img/${item.pkdx_id}.png`, types : item.types, }); }); }); После того как запрос выполнен, свойства и компонента и сервиса заполнились, приложение перерендерилось, данные отображаются. ПОКА ЧТО ВСЕ ХОРОШО Мне понадобилось отфильтровать данные. Делаю это через метод сервиса ApiService: applyFilter(newFilter){ console.log(this.pokemons); this.pokemons = this.pokemons.filter((item) => { let check = {name: 'no value'}; if (item.types[1]) { check = item.types[1]; } if(newFilter === 'All' || item.types[0].name.indexOf(newFilter.toLowerCase()) !== -1 || check.name.indexOf(newFilter.toLowerCase()) !== -1){ return true; } else return false; }); console.log(this.pokemons); } Все хорошо, свойство сервиса ApiService уже не из 10 элементов, а из 2. НО приложение не обновило вьюшку. Вопрос: что не так? как при обновлении данных в сервисе обновлять вьюшку? Почему первый раз вьюшка обновилась(когда данные пришли асинхронно), а второй раз - нет? Подобные изменения вообще делаются через сервисы? |
как-то гуглом же надо учиться пользоваться?:)
http://stackoverflow.com/questions/3...lar-2/35106069 |
Цитата:
У меня такого не происходит. Почему первый раз вьюшка обновилась(когда данные пришли асинхронно), а второй раз - нет? |
В самом начале переменная в компоненте и в сервисе ссылаются на один и тот же массив, а после того как ты отфильтровал - на разные. Все дело в различном поведении методов push и filter. Push - мутирует данные массива, то есть изменяет уже существующий массив, а filter - создает новый. Ангуляр тут вообще не причем
|
Часовой пояс GMT +3, время: 03:13. |