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

Posted 2023-03-13

【中文标题】将返回的 Observables 转换为角度的自定义类数组

【英文标题】：convert returned Observables to custom class array in angular

【发布时间】：2020-10-24 02:27:56

【问题描述】：

大家好，我将通过显示代码让我的问题变得非常简单

我正在使用 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？ 我没有所有字段，那么怎么可能只映射我想要的那些字段？

希望我的问题很清楚..!!

【问题讨论】：

请让我更清楚一点。所以你的 API 返回一个带有对象数组的 observable，你想对这些对象进行更改并返回被修改的数组？

是的，你可以点击jsonplaceholder.typicode.com/users，它会返回我需要的 json 对象数组 1) 我需要转换为我的自定义对象 2) 如果我不需要所有属性，我可以只能映射某些属性，例如它具有地理属性，但如您所见，我没有它，所以我可以拥有自己的自定义类的对象是否可能？

是的，它可能在那一分钟内写了一个函数

【参考方案1】：

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

在订阅之前，我们将通过管道将 map() 函数传递到可观察流中，然后将该数组中的每个元素 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);
  

【讨论】：

你是这样从rxjs导入地图的吗？从 'rxjs/operators' 导入 map ;

是的，我需要导入所有东西，但它得到了解决，但遇到了你提到的用户的其他问题，你能解释一下 const user: User = name: item.name, email: item.电子邮件， 我收到“找不到名称‘用户’”

在打字稿中，我们创建模型来表示我们的数据的外观，但是由于您没有用户界面，只需删除“：用户”

【参考方案2】：

您可以像下面这样，在User 类中有一个构造函数并在映射时返回User

import  Component, VERSION, OnInit  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  map  from 'rxjs/operators';

export class User 
    email: string;
    id: number;
    name: string;
    phone: string;
    username: string;

    constructor( user: User ) 
      Object.assign( this, user );
    


@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)

export class AppComponent implements OnInit  
  name = 'Angular ' + VERSION.major;

  constructor(private http: HttpClient)

  ngOnInit() 
    this.http.get<User[]>("https://jsonplaceholder.typicode.com/users")
    .pipe(
      map( data => 
        return data.map( ( user ) => 
          return new User( 
            email: user['email'],
            id: user['id'],
            name: user['name'],
            phone: user['phone'],
            username: user['username'],
           );
         );
       ),
    )
    .subscribe( (users : User[]) => console.log(users) );
  

工作stackblitz

【讨论】：

感谢像我这样添加的解决方案。_usersService.getUsers() .pipe( map( data => return data.map( ( user ) => return new User( email: user['email'], id: user['id'], name: user['name'], phone: user['phone'], username: user['username'], ); ); ), ) .subscribe( (users : User[]) => console.log(users) );但我得到的映射值只是 Id rest 未定义，你能指导我缺少什么吗？

@kushalBaldev 休息如何未定义？在 stackblitz 中，只要它工作正常！！！

你能删除那个pipe() 并订阅然后在订阅中执行console.log(data) 并检查你得到的值是什么

是我的错误我重新启动了服务器，谢谢..!!!它就像一个魅力。！！

我刚刚看了你的个人资料，似乎你对前端有知识，所以我已经有两篇关于角材料部分的帖子，但仍未得到答复，你能提供解决方案，以便我可以为你提供链接一样的吗？