使用 rxjs 和 distinctUntilChanged 从 api 调用中获取项目

Question

我是学习 rxjs 操作的新手，我正在尝试使用 rxjs 来获取不同的项目。

我从我的 api 调用中获取以下数据

[0 … 99]
0: {option: "OptionOne", subOption: "subOption11"}
1: {option: "OptionOne", subOption: "subOption12"}
2: {option: "OptionTwo", subOption: "subOption21"}
3: {option: "OptionTwo", subOption: "subOption22"}
...
...
...

API 调用

  getOptions(): Observable<Options> {
    const url = `https://localhost:5001/api/options/`;
    return this.http.get<Options>(url).pipe(map((item) => item));
  }

我正在尝试获取选项和子选项。我在 component.ts 文件中按以下方式设置了代码

  getDistinctOptions(data: Options) {
    const source$ = from([data]);
    source$.pipe(distinctUntilKeyChanged('option')).subscribe(console.log);
  }

如何循环并获得不同的选项？

Answer 1

如果我理解正确并且对/api/options 的调用返回一个Options 类型，如下所示：

type Options = Array<{ option: string; subOption: string }>;

那么使用 RxJS 的一种方法是：

getDistincOptions(): Observable<Options> {
  const url = `https://localhost:5001/api/options/`;
  return this.http.get<Options>(url).pipe(
    mergeMap(options => options),
    distinct(item => item.option),
    toArray()
  );
}

或者，如果您只想返回具有不同选项的字符串数组：

getDistincOptions(): Observable<string[]> {
  const url = `https://localhost:5001/api/options/`;
  return this.http.get<Options>(url).pipe(
    map(options => [...(
      new Set(options.map(
        item => item.option
      ))
    )])
  );
}