Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.10.2016, 18:36
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

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.

НО приложение не обновило вьюшку.

Вопрос: что не так? как при обновлении данных в сервисе обновлять вьюшку? Почему первый раз вьюшка обновилась(когда данные пришли асинхронно), а второй раз - нет? Подобные изменения вообще делаются через сервисы?
Ответить с цитированием
  #2 (permalink)  
Старый 05.10.2016, 20:17
Кандидат Javascript-наук
Отправить личное сообщение для yazonnile Посмотреть профиль Найти все сообщения от yazonnile
 
Регистрация: 25.05.2012
Сообщений: 133

как-то гуглом же надо учиться пользоваться?
http://stackoverflow.com/questions/3...lar-2/35106069
Ответить с цитированием
  #3 (permalink)  
Старый 05.10.2016, 20:26
Интересующийся
Отправить личное сообщение для lakusha Посмотреть профиль Найти все сообщения от lakusha
 
Регистрация: 30.01.2016
Сообщений: 17

Сообщение от yazonnile Посмотреть сообщение
как-то гуглом же надо учиться пользоваться?
http://stackoverflow.com/questions/3...lar-2/35106069
Пишут: Rendering happens after change detection.
У меня такого не происходит. Почему первый раз вьюшка обновилась(когда данные пришли асинхронно), а второй раз - нет?
Ответить с цитированием
  #4 (permalink)  
Старый 14.12.2016, 17:09
Новичок на форуме
Отправить личное сообщение для Alexey12345 Посмотреть профиль Найти все сообщения от Alexey12345
 
Регистрация: 14.12.2016
Сообщений: 3

В самом начале переменная в компоненте и в сервисе ссылаются на один и тот же массив, а после того как ты отфильтровал - на разные. Все дело в различном поведении методов push и filter. Push - мутирует данные массива, то есть изменяет уже существующий массив, а filter - создает новый. Ангуляр тут вообще не причем

Последний раз редактировалось Alexey12345, 14.12.2016 в 17:11.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу Senior Frontend (React, Angular), Москва, 140 - 180 000 gross, full time офис. Ekaterina Polyakova Работа 0 11.08.2016 19:07
Angular 2. Как правильно создавать компоненты. Edward10 Angular.js 2 24.06.2016 14:20
как подружить angular и Laravel schel4ok Angular.js 0 19.06.2016 21:23
Angular task workflow mardoksp Angular.js 0 15.02.2016 21:34
Angular и динамический контент Diem Angular.js 1 26.07.2013 18:57