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:38. |