根据ID过滤可观察的

Question

我正在尝试理解和使用 Observables ，但我想让它起作用，但现在我需要根据其中的id来过滤内部数据，例如：datas具有l1: 1和l2 : 2的数据应分组在一起，就像具有
数据的数据一样 l1: 1,l2: 3,l3: 4

哪种方法最好？我尝试使用.filter()和.distinct()，但无法使其正常工作，应该在组件内部还是直接在服务内部进行过滤？

service.ts

  getStructure(): Observable<StructureInterface[]> {
    return this.httpClient.get<StructureInterface[]>(`someUrl`)
      .pipe(
        tap(data =>
        console.log('Get structure done ', data)),
        catchError(this.handleError)
      );
  }

interface.ts

export interface StructureInterface {
  parts: {
    part: string,
    l1: number,
    l2: number,
    l3: number,
    diam: Array<{}>;
    price1: number,
    price2: number
  },
  labels_levels: [string];
  labels_diameters: [string];
}

component.ts

  labels: any[];


  constructor(private httpClient: HttpClient,
              private activatedRoute: ActivatedRoute,
              private service: Service
              ) {
  }


//Call to service

  ngOnInit() {
      this.service.getStructure().subscribe(
        res => {
          this.labels = res;
          //I tried .filter() here
          console.log(this.labels)
        });

  }

感谢您的帮助

Answer 1

在这里考虑数据流：

1. 传入的http响应-未过滤的内容数组
2. 通过一次性可观察到的http.get（）
3. 以StructureInterface对象数组的形式返回到您的组件

我认为您想在步骤3过滤数据，这意味着在可观察对象完成之后这是一个问题，因此它只是一个简单的数组过滤器。如何过滤阵列取决于所需的数据。

此示例仅保留l1等于1的对象。

this.service.getStructure().subscribe(res => {
  this.labels = res.filter(structure => structure.l1 === 1);
  // will only include array items with an l1 value of 1
  console.log(this.labels)
});

编辑 要回答有关应在何处进行过滤的问题，这取决于您的用例。理想情况下，您要将id参数传递到服务器并在其中进行过滤。如果无法控制，则可以在可观察的map（）中应用过滤器：

getStructure(l1: number): Observable<StructureInterface[]> {
    return this.httpClient.get<StructureInterface[]>(`someUrl`)
      .pipe(
        map(response => response.parts.filter(x => x.l1 === l1)),
        catchError(this.handleError)
      );
  }