将 angular HTTP 响应转换为 class

Question

我正在尝试将响应对象从我的 angular 项目中的 HTTP Post 请求转换为我定义的 Person class。我在 HTTP 服务中定义了一个通用 post 方法，并在我的个人服务中调用该方法，并将通用替换为 Person。所以，我想，既然我已经完成了，那么 HTTP response 应该是 Person，但它不是 - 它只是一个 Object。我需要它是一个 Person 因为我的 Person class 有一些我需要访问的自定义逻辑。我可以在我的个人服务中编写一个辅助方法，但我觉得这应该可行 - 特别是因为当我将鼠标悬停在它上面时，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

来自 http 服务的响应将是一个 json 对象，该对象反序列化为 javascript 对象。您的人员服务无法立即将 api 响应中收到的 JavaScript 对象转换为人员对象。请记住打字稿代码被转译为 javascript 代码。要将 javascript 对象转换为您的 Person class 对象，您必须手动实例化您的 class 对象并通过将响应投影到 api 的响应中填充属性人物对象。您可以执行以下操作[注意用于投影对人的响应的地图运算符]-

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))
      .pipe(
        map(response => {

          const person = new Person();
          //fill the person props from response
          return person;
        }),
      );
  }
}

Answer 2

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

HttpClient.post() 方法不能 return 键入 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)
  );
}

将 angular HTTP 响应转换为 class

Cast angular http response into class

observable

angular

angular-httpclient