Question

我希望返回一个列表，其中列出了根据用户选择的复选框（年龄，品种，动物类型-猫或狗等）过滤的动物；但是，我很难让新的动物列表/数组仅在用户选中复选框时才显示在屏幕上。

我能够首先展示所有动物（在本地运行，我有12只动物，6只猫和6条狗）。现在我的问题是，当用户选择只展示狗时，某些动物会消失。 lsit不会更新，并且仍然显示所有动物。

我已经尝试了几乎所有堆栈溢出问题。我能够获取要发送到管道的搜索条件，但不能从json服务器获取动物列表。

我已经放入多个console.logs（）进行调试，看看什么数据将流向何处。

背景： DisplayAnimalsComponent包含两个组件：1）FiltersComponent，2）ProfileSquaresComponent。 DisplayAnimalsComponent没有逻辑，HTML只是列出为1和2的两个组成组件的标签。

首先，当所有这些动物加载完毕时，所有动物都通过使用服务加载，该服务从GET请求中获取所有动物并显示它们。它将所有GET响应分配给一个变量：动物。这是在ProfileSquaresComponent的ngOnInit（）中完成的。

用户单击FiltersComponent HTML中的复选框后，会将其发送到ngOnChange（）的ProfileSquaresComponent方法，然后将其推送到组件变量filterCriteria，然后发送动物列表（如ngOnInit（））和条件列表（如上列表中的filterCriteria）到filterAnimals管道。

我无法获取要发送到管道的动物列表。

配置文件正方形组件：用户单击以转到其配置文件的实际动物图块

ngOnInit() {
    return this.displayAdoptablesService.getAnimals()
      .subscribe((res: any[]) => {
        this.animals = res;
        console.log('Animals init: ', this.animals);
      });
  }

  ngOnChange(filter) {
    this.filterCriteria.push(filter);
    console.log('Adding to filterCriteria: ', this.filterCriteria);

    this.animals = this.filterAnimalsPipe.transform(this.animals, this.filterCriteria);
    console.log('Animals change: ', this.animals);
  }

过滤器组件：用户可以选中的复选框以选择显示某些动物

public updateFilters(filterCriteria: string) {
    const lowerFilter = filterCriteria.toLowerCase();
    // this.profileSquares.filterCriteria.push(lowerFilter);
    this.profileSquares.ngOnChange(lowerFilter);
  }

Filter Animals Pipe：用于获取所有动物列表，选中的复选框列表并过滤所有动物列表以返回到Profile Squares组件以在DisplayAnimalsComponent中显示的管道。

@Pipe({
  name: 'filterAnimals'
})
export class FilterAnimalsPipe implements PipeTransform {

  transform(animals: any[], searchCriterion: any[]): any {

    console.log('Search criterian: ', searchCriterion);
    console.log('Animals criterian: ', animals);

    if (!animals) {
      return [];
    }

    if (!searchCriterion) {
      return animals;
    }

    return animals.filter(animal => animal.type === searchCriterion);

  }
}

我希望用户在页面加载时能看到所有动物。

然后，如果用户选择只看狗，则所有其他动物都消失了。如果用户选择其他过滤器（如Young），则只会显示Young Dogs。

如何使用管道从复选框列表中过滤Angular 7中的对象数组

0 个答案: