如何过滤对象数组并使用打字稿返回对象数组

Question

您好，我想知道是否有人可以帮助我过滤一组对象。 当我执行以下操作时，它会返回一个数组数组而不是我需要进行特定显示的对象数组

 public ngOnInit(): void {
this.checkboxItems.map(x =>
  x.formControl.valueChanges.subscribe((state: boolean) => {
    const filterOption = Object.keys(x.formControl.parent.controls).find(key => x.formControl.parent.controls[key] === x.formControl);
    console.log('test', state, filterOption);
    if (state && filterOption) {
      this.activatedRoute.data?.pipe(takeUntil(this.destroy$)).subscribe((data: Data) => {
        this.timelineModificationsPerYear = data.verticalTimeline?.verticalTimelineModificationPerYears;
        this.timelineModificationsPerYear = this.timelineModificationsPerYear.map(verticalTimelineModificationPerYear =>
          verticalTimelineModificationPerYear.verticalTimelineModifications?.filter(
            verticalTimelineType => verticalTimelineType.type.toLowerCase() === filterOption
          )
        );

        console.log('filter', this.timelineModificationsPerYear);
      });
    }
  })
);

}

Answer 1

我在这里看到了多个问题：

1. 您有嵌套订阅。最好使用像switchMap 这样的高阶映射运算符来避免多次订阅。

2. 您在循环内有订阅。这又会导致在组件关闭时需要处理多个订阅。在这里你可以使用像forkJoin这样的函数。

3. 手头的问题，数组数组。您将每个元素内的数组映射到外部变量。所以它导致数组数组。您可以使用Array#flatMap 而不是Array#map。它类似于map，不同之处在于它将内部数组展平，因此只有一个带有对象的外部数组。

试试下面的

import { forkJoin, NEVER, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

public ngOnInit(): void {
  forkJoin(this.checkboxItems.map(x =>
    x.formControl.valueChanges.pipe(
      switchMap((state: boolean) => {
        const filterOption = Object.keys(x.formControl.parent.controls).find(key => x.formControl.parent.controls[key] === x.formControl);
        return (state && filterOption) ? this.activatedRoute.data : NEVER;
      })
    )
  )).pipe(
    takeUntil(this.destroy$)
  ).subscribe({
    next: (data: Data) => {
      this.timelineModificationsPerYear = data.verticalTimeline?.verticalTimelineModificationPerYears;
      this.timelineModificationsPerYear = this.timelineModificationsPerYear.flatMap(verticalTimelineModificationPerYear => 
        verticalTimelineModificationPerYear.verticalTimelineModifications?.filter(verticalTimeline => 
          verticalTimelineType.type.toLowerCase() === filterOption
        )
      );
    }
  });
}