[lakusha]

Есть компонент 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.

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

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