根据 id 过滤 observable

Question

我正在尝试理解和使用 Observables，我得到了它的工作，但现在我需要根据它们拥有的 id 过滤内部的数据，例如：具有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 步过滤数据，这意味着这是 observable 完成后的问题，因此它只是一个直接向上的数组过滤器。如何过滤数组取决于您需要什么数据。

这个例子只保留 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)
      );
  }