如何在 angular 中使用 Rxjs 过滤器以及 BehaviorSubject

Question

我有一个如下所示的数组。

data = [
    {
      id: 1,
      name: 'a',
      status: true,
    },
    {
      id: 1,
      name: 'b',
      status: true,
    },
    {
      id: 1,
      name: 'c',
      status: false,
    },
  ];

我通过将初始值设置为上述数组创建了 BehaviorSubject。

我想获取数据数组，使用rxjs pipe operator，状态应该为真。因此，过滤过程应该在订阅可观察对象之前发生。

我试过以下方法

 subject: BehaviorSubject<any> = new BehaviorSubject<any>(this.data);
  constructor() {
    this.getSubject()
      .pipe(filter((x) => x.status))
      .subscribe((res) => {
        console.log(res);
      });
  }

  getSubject() {
    return this.subject.asObservable();
  }

预期输出

   [
    {
      id: 1,
      name: 'a',
      status: true,
    },
    {
      id: 1,
      name: 'b',
      status: true,
    }]

Answer 1

您的行为主题正在返回一个数组，并且 rxjs 过滤器应用于可观察对象而非数组。从 observable

获取数组后需要应用过滤器

this.getSubject()
  .pipe(map((arr) => arr.filter(x => x.status)))
  .subscribe((res) => {
    console.log(res);
  });

Answer 2

您发出的是一组值，而不是一个一个地发出值。您可以使用 map 对数组进行操作。另外，您可以直接在主题上调用pipe。

  ngOnInit(): void {
    this.subject
      .pipe(map((x: any[]) => x.filter((x: any) => x.status)))
      .subscribe((res: any) => {
        console.log(res);
      });
  }

附带说明一下，您可以使用 from 和 of.

将数组直接转换为可观察对象

of 将在订阅时发出整个数组。

  data$ = of(this.data);

  ngOnInit(): void {
    this.data$
      .pipe(map((x: any[]) => x.filter((x) => x.status)))
      .subscribe((res: any) => {
        console.log(res);
      });
  }

此记录：

Array [ {…}, {…} ]

from 将在订阅时一个一个发出值。

  data$ = from(this.data);

  ngOnInit(): void {
    this.data$.pipe(filter((x: any) => x.status)).subscribe((res: any) => {
      console.log(res);
    });
  }

此记录：

Object { id: 1, name: "a", status: true }
Object { id: 1, name: "b", status: true }

如何在 angular 中使用 Rxjs 过滤器以及 BehaviorSubject

how to use Rxjs filter in angular along with BehaviorSubject

rxjs

typescript

behaviorsubject

rxjs-filter