Как преобразовать и спроецировать элементы массива из бэкэнда http в angular7

Question

Из бэкэнда http я получаю заметку со списком пользователей:

Observable<User[]>

Пользователь определен как:

export interface User {
  id:number;
  username:string;
}

Я использую угловой 7. В конце концов, в результате внутреннего вызова я хочу получить массив с идентификаторами пользователей ?

Каков наилучший и RXJS-подобный способ выполнить этот переход?

Answer 1

К вашим услугам:

import {Injectable} from '@angular/core';
import {Http} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable()
class MyService {
  constructor(private http: Http) {}

  getUsers(): Observable<User[]> {
    return this.http.get('http://my-api.com/users')
  }
}

В вашем компоненте:

import {map} from 'rxjs/operators';

@Component({ /* ... * / })
export class MyComponent implements OnInit {
  userIds$: Observable<number[]>;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.userIds$ = this.myService.getUsers().pipe(
      map(users => users.map(user => user.id))
    )

    // Now whether you directly subscribe to `this.userIds$` or use the `async` pipe.
    // The Result will be an array of numbers (user ids)
  }
}

Подробнее о Массив map метод и RxJS map оператор . Вы будете использовать эти много .

Answer 2

Используя ваш определенный интерфейс и что вызов http возвращает массив, соответствующий этому интерфейсу, вы бы сделали это следующим образом. Преобразование между возвращаемым типом в ожидаемый тип (в данном случае пользовательский интерфейс в число) можно выполнить с помощью map.

userService.ts

export class UserService {
  constructor(private readonly http: HttpClient) {}

  getUsers() : Observable<User[]> {
    return this.http.get<User[]>('/some/url');
  }
}

userComponent.ts

export class UserComponent implements OnInit {

  userIds: number[];
  constructor(private readonly service: UserService) {}

  ngOnInit() {
    this.service.getUsers().subscribe(users => this.userIds = users.map(_ => _.id));
  }
}

Answer 3

Вы можете использовать функцию .map () для достижения этой цели. Ниже приведен пример того, как вы можете сделать это:

var userIds= Users.map(function(user) {
  return user.id
});

Answer 4

Делаем это супер многословным:)

this.userIds = []
observable.subscribe(users => {
 this.userIds = users.map(user => user.id)
})

• Подписаться на «результат» вызова API
• observable представит вам массив Users
• Функция карты применяет функцию к каждому элементу массива и возвращает, в данном случае, user.id
• Присвойте этот результат нашему массиву userIds