angular - 将 Angular http 响应转换为类

Question

我正在尝试将响应对象从我的 Angular 项目中的 HTTP Post 请求转换为 Person我定义的类。我在 HTTP 服务中定义了一个通用的 post 方法，并在我的个人服务中调用它，通用替换为 Person .所以，我想，因为我已经做到了 HTTP response应该是 Person ，但它不是 - 它只是一个 Object .我需要它是 Person因为我的 Person 类上有一些我需要访问的自定义逻辑。我可以在我的个人服务中编写一个辅助方法，但我觉得这应该可以工作 - 特别是因为 VS Code intellisense 说 response在我的组件中是 Person当我将鼠标悬停在它上面时。

这是我的代码:

http.service.ts

@Injectable()
export class HttpService {
    baseUrl = 'https://baseurl.com';

    constructor(private http: HttpClient) { }

    post<T>(endpointUrl: string, body: any): Observable<T> {
        const fullUrl = this.baseUrl + endpointUrl;
        return this.http
            .post<T>(fullUrl, body)
            .pipe(
                map(response => response as T)
            );
    }
}

person.service.ts

@Injectable()
export class PersonService {

    constructor(private httpService: HttpService) { }

    newPerson(body: Person): Observable<Person> {
        return this.httpService.post<Person>('/people', JSON.stringify(body));
    }
}

person.component.ts

@Component({
    selector: 'app-person',
    templateUrl: './person.component.html',
    styleUrls: ['./person.component.css'],
})
export class PersonComponent {
        person: Person = new Person();

        onSubmit(id: number) {
        if (id == 0) {
            console.log(this.person);                              // Person {id: 0, ...
            console.log(this.person.constructor.name);             // Person
            let body = this.person.fromFormGroup(this.formGroup);

            this.personService.newPerson(body)
                .subscribe(response => {                           // VS Code intellisense says this: (parameter) response : Person
                    this.person = response as Person;
                    console.log(this.person);                      // {id: 72, ...
                    console.log(this.person.constructor.name);     // Object

                    // Trying a different way
                    this.person = <Person>response;
                    console.log(this.person);                      // {id: 72, ...
                    console.log(this.person.constructor.name);     // Object
                })

        }
    }

}

Answer 1

newPerson(body: Person): Observable<Person> {
  return this.httpService.post<Person>('/people', JSON.stringify(body));
}

HttpClient.post()方法不能返回类型 Person ，因为 JSON 响应只是转换为类型。默认类型只是 Object ，但您需要创建 Person 的新实例对于每个响应。如果类型是接口(interface)，那么就没有问题。

您可以创建 Person 的新实例然后将值分配给该实例。

newPerson(body: Person): Observable<Person> {
  return this.httpService.post('/people', JSON.stringify(body)).pipe
    map(value => Object.assign(new Person(), value)
  );
}