Каков наилучший способ справиться с этим кодом, не обновляя данные представления?

Question

Я создаю что-то вроде интернет-магазина, но для приемных животных.Подумайте, как интернет-магазин Apple - с одной стороны у вас есть продукты в сетке, с другой у вас есть ряд флажков и возможность фильтровать эти продукты по.Когда вы нажимаете на один из вариантов фильтрации, обновляются доступные продукты, которые соответствуют этим критериям (чтобы показать более или менее).

Мой вопрос касается дизайна, и как мне подходить к этому.

В настоящее время мой поток выглядит следующим образом:

i) Пользователь попадает на страницу животных, которых можно усыновить.Все животные отображаются с помощью HTTP-запроса Get, который возвращает наблюдаемое.Это наблюдаемое отображается пользователю через цикл ngFor.II) Пользователь нажимает на флажок, чтобы показать только собак, например.iii) Фильтр «собака» добавлен в список для фильтрации.Этот фильтр и доступные животные отправляются в службу фильтрации, где возвращаются только те животные, которые соответствуют критериям «собаки».

Примечание: я выполняю фильтрацию не только по типу (собака или кошка), но и по породе, размеру, уровню активности, возрасту и т. Д. ... Числа и строки.

После этогоУ меня проблема с выяснением того, как получить обновленные данные для отображения в моем HTML.(iii) выше возвращает правильные данные - он показывает список только собак.Но я не смог отобразить это после того, как все животные были изначально показаны пользователю.

Все это заставило меня задуматься, это лучший подход: i) использовать методы фильтрации клиентов ii) использоватьqueryParams для фильтрации iii) писать разные HTTP GET-запросы для разных фильтров (я думаю, это менее вероятно)

Можно предположить, что все импорты выполнены правильно.

Profile-Squares.Component.ts

export class ProfileSquaresComponent implements OnInit {

  public filterCriteria: string;
  public allAnimals: Animal[] = [];
  public animalsToShow: Animal[] = [];

  constructor(private displayAdoptablesService: DisplayAdoptablesService,
              private filterAnimalsService: FilterAnimalsService,
             ) {

  }

  public ngOnInit() {
    this.showAnimals();
  }

  public ngOnChange(filter) {
    this.filterCriteria = filter;
    this.showAnimals();
  }

  public showAnimals(): void {
    this.displayAdoptablesService.getAnimals()
      .subscribe((res: any) => {
        this.allAnimals = res;
        this.animalsToShow = this.getAnimalsToDisplay();
        console.log('Animals to show: ', this.animalsToShow);
        console.log('All animals: ', this.allAnimals);
      });
  }

  public getAnimalsToDisplay() {
   return this.filterAnimalsService.filterByBreed(this.allAnimals, this.filterCriteria);
  }

}

Display-Adoptables.service.ts

private baseUrl = 'http://localhost:3000';

  constructor(private httpClient: HttpClient) {

  }

  public getAnimalById(id: number): Observable<Animal> {
    return this.httpClient.get<Animal>(this.baseUrl + '/displayAnimals/' + `${id}`);
  }

  public getAnimals(): Observable<Animal[]> {
    return this.httpClient.get<Animal>(this.baseUrl + '/displayAnimals')
      .map(res => res);
      // .filter(animal => animal.type.toLocaleLowerCase().includes('dog')));
  }

Filter-Animals.Service.ts

import { Injectable } from '@angular/core';
import { Animal } from 'src/app/models/animal';

@Injectable({
  providedIn: 'root'
})
export class FilterAnimalsService {

  public filterByBreed(animals: Animal[], type: string) {
    if (!animals) {
      return [];
    }

    if (!type) {
      return animals;
    }

    return animals.filter(animal => animal.type.toLocaleLowerCase().includes(type.toLocaleLowerCase()));
  }

  public filterByStatus(animals: Animal[], status: string) {
    if (!animals) {
      return [];
    }

    if (!status) {
      return animals;
    }

    return animals.filter(animal => animal.status.toLocaleLowerCase().includes(status.toLocaleLowerCase()));
  }

}