Невозможно использовать выходное значение подписки в функции фильтра

Question

Я надеюсь, что кто-то может помочь, в Angular 7 я в настоящее время звоню в файл Json через сервис, это работает нормально, и я могу вывести массив объектов, однако то, что я пытаюсь сделать, такзатем выполняется фильтрация объектов в массиве путем сопоставления значения свойства с именем «Id» с идентификатором параметра URL и, в конечном счете, с выводом только одного этого объекта на эту страницу.

Я использую activRoute, чтобы получитьId активного параметра, это работает отлично, однако, когда я пытаюсь фильтровать по paramsId.id , он выводит пустой массив, но если я заменю paramsId.id на число, которое я знаю, этобудучи использованным в качестве идентификатора одного из объектов в массивах, которые он выводит нормально, я также могу вывести paramsId.id в журнал консоли нормально, но по какой-то причине я просто не могу заставить его работать вфильтр.

Работает:

return animal.id === 5;

Не работает:

return animal.id === paramsId.id;

Это то, что есть в моем файле ts компонента:

constructor(private activatedRoute: ActivatedRoute, private animalService:AnimalService) { }

  ngOnInit() {

    this.animalService.getAnimals().subscribe(animals => {

      this.animals = animals;

      this.activatedRoute.params.subscribe(paramsId => {

        const filterAnimal =  this.animals.filter(function(animal) {
          return animal.id === paramsId.id;
        })

        console.log(filterAnimals);

      });

    });

  }

Любая помощь будет отличной.

Answer 1

Ваше текущее решение не работает, потому что paramsId.id - это строка, а animal.id - это число."5"! == 5, поэтому вам нужно выполнить parseInt (paramsId.id).

В вашей службе должен быть метод getAnimal, который принимает идентификатор животного и возвращает одно животное

animal$ = this.activatedRoute.params.pipe(
  map(params => parseInt(params.id)),
  // parseInt is why your current solution is not working as string !== number
  switchMap(id => this.animalService.getAnimal(id))
);

и затем используйте животное $ observabal в вашем шаблоне с асинхронным каналом.

<ng-container *ngIf="animal$ | async as animal">
  {{animal | json}}
</ng-container>

Подписки не требуются.

В службе

getAnimal(id: number) {
  return this.getAnimals().pipe(
    map(animals => animals.find(animal => animal.id === id))
  );
}