Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Angular 2, re-render компонента (https://javascript.ru/forum/angular/65228-angular-2-re-render-komponenta.html)

lakusha 05.10.2016 18:36

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.

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

Вопрос: что не так? как при обновлении данных в сервисе обновлять вьюшку? Почему первый раз вьюшка обновилась(когда данные пришли асинхронно), а второй раз - нет? Подобные изменения вообще делаются через сервисы?

yazonnile 05.10.2016 20:17

как-то гуглом же надо учиться пользоваться?:)
http://stackoverflow.com/questions/3...lar-2/35106069

lakusha 05.10.2016 20:26

Цитата:

Сообщение от yazonnile (Сообщение 430795)
как-то гуглом же надо учиться пользоваться?:)
http://stackoverflow.com/questions/3...lar-2/35106069

Пишут: Rendering happens after change detection.
У меня такого не происходит. Почему первый раз вьюшка обновилась(когда данные пришли асинхронно), а второй раз - нет?

Alexey12345 14.12.2016 17:09

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


Часовой пояс GMT +3, время: 09:47.