为了账号安全,请及时绑定邮箱和手机立即绑定

将返回的 Observables 转换为角度的自定义类数组

将返回的 Observables 转换为角度的自定义类数组

HUH函数 2022-10-27 16:33:43
大家好,我将通过显示代码使我的问题变得非常简单我正在使用 Json 占位符站点作为假休息 Api我有一个用户类对象我想将返回的 Observable 转换为自定义类对象数组。 import { Injectable } from '@angular/core';    import { HttpClient } from '@angular/common/http';    import { Observable } from 'rxjs';    import { Users } from './users.model';            @Injectable({          providedIn: 'root'        })        export class UsersService {                  private url = "https://jsonplaceholder.typicode.com";                  constructor(private http:HttpClient) {            console.log(this.getUsers());           }                          getUsers():Observable<Users[]>{            return this.http.get<Users[]>(`${this.url}/posts`);        }                }以上是我的服务    export class Users {        email:          string;        id:             number;        name:           string;        phone:          string;        username:       string;            }以上是我的课程,我没有包含所有属性在我的打字稿文件中,我有类似的代码。constructor(private _usersService:UsersService) {      }  ngOnInit(): void {       this._usersService.getUsers().subscribe(data=>this.users=data);    console.log(this.users);  }现在我想要的是如何在我的自定义类对象中转换返回的 observable?我没有所有字段,那么如何仅映射我想要的那些字段?希望我的问题很清楚..!!
查看完整描述

1 回答

?
慕少森

TA贡献2019条经验 获得超9个赞

所以这个答案利用了从 rxjs 导入的 map() 。


在订阅之前,我们将通过管道将 map() 函数传递到 observable 流中,然后将该数组中的每个元素 map() 到适合我们用户界面的新对象中


然后我们订阅,我们得到的数据将是一个适合我们用户界面的数组


ngOnInit(): void {

   

    this._usersService.getUsers()

    .pipe(map(data => {

      return data.map(item => {

        const user: User = {

          name: item.name,

          email: item.email,

        }

        return user

      })

    }))

    .subscribe(data=>this.users=data);


    console.log(this.users);

  }


查看完整回答
反对 回复 2022-10-27
  • 1 回答
  • 0 关注
  • 68 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信