如何在angular7中从http后端转换和投影数组元素答案

【问题标题】：How to transform and project array elements from http backend in angular7如何在angular7中从http后端转换和投影数组元素
【发布时间】：2019-03-12 19:00:55
【问题描述】：

从 http 后端我得到一个带有用户列表的 observable：

Observable<User[]>

用户定义为：

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

我正在使用 Angular 7。最后，作为后端调用的结果，我想要一个 用户 ID 数组？

执行此转换的最佳且类似于 RXJS 的方式是什么？

【问题讨论】：

使用map operator
请分享您的服务或您正在调用http请求的代码

标签： angular http rxjs

【解决方案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)
  }
}

详细了解Array map method 和RxJS map operator。你会经常使用这些。

【讨论】：

【解决方案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));
  }
}

【讨论】：

【解决方案3】：

让它超级冗长:)

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

订阅 API 调用的“结果”
observable 将向您显示用户数组
Map 函数将函数应用于数组的每个元素并返回，在本例中为 user.id
将此结果分配给我们的 userIds 数组

【讨论】：

【解决方案4】：

您可以使用 .map() 函数来实现这一点。以下是如何执行此操作的示例：

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

【讨论】：