Question

我希望有人可以提供帮助，在Angular 7中，我当前正在通过服务调用Json文件，这工作正常，并且我能够输出对象数组，但是我正在尝试这样做然后通过匹配名为“ Id”的属性的值与URL参数id并最终在该页面上仅输出单个对象来过滤数组中的对象。

我正在使用ActivatedRoute来获取活动的参数ID，这很好用，但是当我尝试通过 paramsId.id 进行过滤时，它会输出一个空数组，但是如果我替换 paramsId .id 带有一个我知道的数字，它被用作它输出的数组中对象之一的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上有一个方法，该方法需要一个动物id并返回一个动物

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))
);

，然后通过异步管道在模板中使用animal $观测值。

<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))
  );
}

无法在过滤器功能中使用订阅输出值

1 个答案: