如何过滤可观察数组答案

【问题标题】：How to filter observable array如何过滤可观察数组
【发布时间】：2021-09-15 09:19:16
【问题描述】：

我正在学习 RxJS。我试图只过滤那些代码为“ABC”和“XYZ”的data数组项，但出现语法错误。

这是我尝试过的：

    myApi(): void {
        this.myService.dropdownData()
        .pipe(
        map((data) => data.filter((item) => return {
          item.Code ==='ABC' || item.Code === 'XYZ'
        }))
        )
        .subscribe(
          data => {
           
            console.log('222', data);
          },
          error => {
            this.alert.error(error.error.Message);
          }
        );
      }

【问题讨论】：

你想在 console.log 中打印什么？数据对您意味着什么？你有语法错误，因为返回应该在括号中

标签： angular typescript rxjs

【解决方案1】：

您可以使用过滤运算符本身：https://www.learnrxjs.io/learn-rxjs/operators/filtering/filter

所以你可以这样尝试：

this.myService.dropdownData()
    .pipe(
      filter(item => item.Code === "ABC" || item.Code === "XYZ")
    )
)

另外，您确定是.Code 而不是.code？

【讨论】：

你能发布你的模型模型的结构（IConditionDropdownData）吗？
此解决方案不起作用，因为它处理过滤发出的值，而不是 array 本身。

【解决方案2】：

您使用的RxJS 运算符没有问题，但正如您在问题中所说，您有语法错误，因为您在filter 中使用return 没有括号{} , 并使用方括号将错误的语句括起来。

所以你只需要删除return 和括号{}，如下所示：

myApi(): void {
  this.myService
    .dropdownData()
    .pipe(
      map((data) =>
        data.filter((item) => item.Code === 'ABC' || item.Code === 'XYZ')
      )
    )
    .subscribe(
      (data) => {
        console.log('222', data);
      },
      (error) => {
        this.alert.error(error.error.Message);
      }
    );
}

【讨论】：

这个解决方案也会在数据发生变化时发出信号，但不是过滤结果。只是要记住的事情。也许在这里使用 RxJS 中的 filter 运算符是更好的方法，具体取决于 OP 的需求。
他只是想过滤来自API的结果array并从中排除一些项目，所以在这种情况下不需要使用filter运算符！