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

Question

我认为这应该很容易，但我找不到一个像样的解决方案。这是一个演示，说明了我的要求：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 类型数组中的服务器响应，我的意思是我不想要来自服务器的额外字段。如何删除这些多余的字段？

Answer 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((它时，你将只是一个由PostData个具有id和title属性的对象组成的数组。

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

此外，我建议您使用接口，而不是类。对于此方案，尽量不要将属性保留为可选属性。

export interface PostData {
  id: number;
  title: string;
}

Answer 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')
  }