Angular 7中与打字稿类紧密耦合的地图服务器响应列表

Posted 2023-03-13

【中文标题】Angular 7中与打字稿类紧密耦合的地图服务器响应列表

【英文标题】：Tightly coupled map server response list with typescript class in Angular 7

【发布时间】：2019-11-27 00:11:44

【问题描述】：

我认为这应该很容易，但我找不到合适的解决方案。 这是一个演示，说明了我的要求： https://stackblitz.com/edit/angular-zjxvuh

我从服务器收到这样的响应：

["userId":10,"id":197,"title":"dignissimos quo nobis earum saepe","completed":true,"userId":10,"id":198,"title":"quis eius est sint explicabo","completed":true,"userId":10,"id":199,"title":"numquam repellendus a magnam","completed":true]

我的打字稿类看起来像：

export class PostData 
  public id?: number;
  public title?: number;

import  Component  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  PostData  from './post';
import  map, tap  from "rxjs/operators";
import  Observable  from 'rxjs';

@Component(
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
)
export class AppComponent  
  name = 'Angular 4';
  postData: PostData;
  constructor(private http: HttpClient)  


  ngOnInit(): void 

    var data = this.getFoo().subscribe(data => 
        console.log("data",JSON.stringify(data))
    );
    //console.log(data);
  

  getFoo(): Observable<PostData[]> 
		return this.http.get<PostData[]>      ('https://jsonplaceholder.typicode.com/todos')
      .pipe(map(res => 
           return res as PostData[];
        )
      )
	

我想要 Post 类型数组中的服务器响应我的意思是我不想要来自服务器的额外字段。如何去掉那些多余的字段？

【问题讨论】：

How to reduce javascript object to only contain properties from interface的可能重复

【参考方案1】：

您可以修改getFoo() 方法以仅返回必填字段。其中一种方法是使用Array.map()

getFoo(): Observable<PostData[]> 
  return this.http.get<PostData[]>('https://jsonplaceholder.typicode.com/todos')
    .pipe(
      map(res => 
        const data = res.map(obj => <PostData>
          id: obj.id,
          title: obj.title
        );
        return data;
      )
    );

这样，在您的 ngOnInit() 上，当您返回 observable 和 console.log() 时，您将只是一个由具有 id 和 title 属性的 PostData 对象组成的数组。

this.getFoo().subscribe(data =>  
    console.log(JSON.stringify(data));
);

此外，我建议您使用interface，而不是类。对于这种情况，尽量不要将属性保留为可选。

export interface PostData 
  id: number;
  title: string;

【参考方案2】：

试试这样：

 ngOnInit(): void 
    var data = this.getFoo().subscribe((resp: PostData[]) => 
      console.log("data", JSON.stringify(resp))
    )
  


  getFoo(): Observable<PostData[]> 
    return this.http.get<PostData[]>('https://jsonplaceholder.typicode.com/todos')
  

【讨论】：

这行不通。它控制来自服务器的所有属性值。