Question

我构建了一个自定义组件，用于过滤对象数组。过滤器使用按钮，从活动状态设置为非活动状态，并允许同时打开/关闭多个选项。

我尝试的StackBlitz-https://stackblitz.com/edit/timeline-angular-7-ut6fxu

在我的演示中，您将看到北，南和东的3个按钮/选项。通过单击一个，可以将其激活，结果应包括或排除北，南和东的匹配“位置”。

我已经创建了用于过滤的方法和结构，我在最后的逻辑中苦苦挣扎。

到目前为止，我已经创建了一种方法来创建过滤位置数组，具体取决于用户从3个按钮中单击的内容。

接下来，这传递给我的“过滤器数组”，该逻辑获取的逻辑应将此过滤后的数组与原始数组进行比较，以取回仍然剩余的结果数组。

它不是很有效，也不知道为什么-我本来是通过使用管道来实现此功能的，但是出于某些原因，我不想朝那个方向前进。

//the action
  toggle(location) {
    let indexLocation = this.filteredLocations.indexOf(location);

    if (indexLocation >= 0) {
      this.filteredLocations = this.filteredLocations.filter(
        i => i !== location
      );
    } else {
      this.filteredLocations.push({ location });
    }
    this.filterTimeLine();
  }

// the filter
  filterTimeLine() {
    this.filteredTimeline = this.timeLine.filter(x =>
      this.contactMethodFilter(x)
    );
  }

//the logic
  private contactMethodFilter(entry) {
    const myArrayFiltered = this.timeLine.filter(el => {
      return this.filteredLocations.some(f => {
        return f.location === el.location;
      });
    });
  }

https://stackblitz.com/edit/timeline-angular-7-ut6fxu

Answer 1

对不起，我的意思是您的代码很麻烦。 jajaja !.也许您失去了所需的东西，但是您的功能逻辑错了。比较字符串和对象。过滤一个数组，该数组可以过滤内部的同一数组...所以您需要进行一些更改。

一个：

 this.filteredLocations.push({location});

您正在推动的对象。您只需要按字符串即可。

 this.filteredLocations.push(location);

两个：

  filterTimeLine() {
    this.filteredTimeline = this.timeLine.filter(x =>
      this.contactMethodFilter(x)
    );
  }

在此函数中，您过滤timeLine数组。在contactMethodFilter内部，您再次将filter方法调用为timeLine。...

查看功能性解决方案：

https://stackblitz.com/edit/timeline-angular-7-rg7k3j

Answer 2

private contactMethodFilter(entry) {
    const myArrayFiltered = this.timeLine.filter(el => {
      return this.filteredLocations.some(f => {
        return f.location === el.location;
      });
    });
  }

此函数不返回任何值，而是传递给.filter

考虑根据您的逻辑返回布尔值。当前，过滤器未定义（虚假），所有内容都会被过滤掉

使用TypeScript从数组中过滤对象数组

2 个答案: