从 Angular 6 个 observable 中提取特定值

Question

使用 Angular 6，我正在进行 API 调用，该调用使用如下接口：

服务：

   getEmployees(): Observable<Employees[]> {
    return this.http.get<Employees[]>(this.getEmployeesAPI);
  }

内部组件：

    ngOnInit() {
        this.employeeService.getEmployees()
          .subscribe(data => {
            console.log(data);
          });

      }

简单模型界面：

export interface Employees {

  fullName: string;

}

API 响应看起来像这样，它是一个对象数组，响应中大约有 3900 个 'user' 对象。

[
{
"fullName": "Robert Jones"
},
{
"fullName": "Ian Cooper"
},
{
"fullName": "Jackie Jones"
},
{
"fullName": "Amber Smith"
}
]

如果我在 table 或其他元素类型的网格中显示它们，我可以轻松地在模板中使用它们，如下所示：

{{ data.fullName }}

然而我需要做的只是获取值列表，即 "the names"。在 observable 之外，所以我可以在 typeahead 中使用它们。 typeahead 是 NG Bootstrap 我已经在 Whosebug 上查看了几篇文章两天了，但还没有找到正确的答案。

在 NG Bootstrap 文档中，他们谈到从服务中进行搜索，但是这会破坏 GUI 并且没有响应，我的想法是预取数据，将它们 smoosh（技术术语）放入数组（在内存中）他们在本地数组上使用前面的类型。

组件 Class：

 employees: Employees[];



  //kicks in when 3 characters characters are typed.
  employeeSearch = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      map(search => search.length < 3 ? []
        : this.employees.filter(v => v.fullName.indexOf(search.toLowerCase()) > -1).slice(0, 10))
    )

我试过使用 rxjs 中的 map 和 pluck，但结果很糟糕。

Answer 1

所以基本上你想把一个对象数组变成一个简单的字符串数组。

理想情况下你可以只用 map:

this.employeeService.getEmployees().pipe(
  map((employees: Employees[]) => employees.map(e => e.fullName)),
).subscribe(...);

或者，如果您想做更多 "Rx way"，您可以将数组解压缩为单个发射，然后将它们收集回数组中：

this.employeeService.getEmployees().pipe(
  mergeAll(), // unpack the array
  pluck('fullName'),
  toArray(),
).subscribe(...);

从 Angular 6 个 observable 中提取特定值

pulling specific values from Angular 6 observable

rxjs

ng-bootstrap

angular