вытягивая конкретные значения из Angular 6 наблюдаемого - PullRequest
Новая
       10

вытягивая конкретные значения из Angular 6 наблюдаемого

0 голосов
/ 29 января 2019

с использованием 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 таких «пользовательских» объектов находятся внутри ответа. 

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

Iих можно легко использовать в шаблоне, если я отображал их в таблице или в сетке других типов элементов, например так: 

{{ data.fullName }}

однако мне нужно просто получить список значений, то есть "имена",из наблюдаемого, так что я могу использовать их в голове.typeahead - NG Bootstrap. Я просмотрел несколько постов здесь на stackoverflow в течение двух дней и до сих пор не нашел правильного ответа.

в документации NG Bootstrap они говорят о выполнении поиска из службы, однако это убивает графический интерфейс и не реагирует, моя идея состояла в том, чтобы предварительно извлечь данные, смушить (технический термин) их в массив (вmem) они используют тип вперед в локальном массиве.

Класс компонента: 

 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))
    )

Я пробовал использовать map и pluck из rxjs, они были встречены с плохими результатами.

1 Ответ

0 голосов
/ 29 января 2019

Таким образом, в основном вы хотите превратить массив объектов в простой массив строк.

В идеале вы можете сделать это только с 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(...);
...