Angular2 HTTP GET - Cast response into full object

45 浏览
0 Comments

Angular2 HTTP GET - Cast response into full object

我有一个简单的组件

import {Component} from 'angular2/core';
import {RouterLink, RouteParams} from 'angular2/router';
import {Http, Response, Headers} from 'angular2/http';
import {User} from '../../models/user';
import 'rxjs/add/operator/map';
@Component({
    template: `
        
{{user.name}} {{user.surname}}

    `,
    directives: [RouterLink],
})
export class UserComponent {
    user: User;
    constructor(private routeParams: RouteParams,
        public http: Http) {
            this.user = new User();
            this.http.get('http://localhost:3000/user/' + this.routeParams.get('id'))
                .map((res: Response) => res.json())
                .subscribe((user: User) => this.user = user);
        console.log(this.user);
    }
}

为什么subscribe没有将响应转换为完整的User对象。当我记录user变量时，我的控制台显示User {_id: undefined, name: undefined, surname: undefined, email: undefined}。但是尽管如此，在视图中绑定到.name和.surname仍然有效。

这里发生了什么？用户实际上存储在哪里？

0

3 答案

0 Comments

问题的出现原因是作者希望将HTTP GET请求的响应转换为完整的对象。根据Angular文档的建议，最佳实践是使用Observable来消费GET响应的数据。作者使用了HttpClient来发送HTTP请求，并且在服务方法中返回一个Observable。这种做法在大多数情况下都可以正常工作，但是它只是进行了类型断言，而不是真正的类型转换。如果在类中有一个函数export class User { test() { console.log("works"); } }，那么无法运行user.test()。需要注意的是，这种方法仅在Angular 4.3+版本中可用，因为在该版本中引入了新的HttpClient。

如果GET方法需要返回一个Model数组，那么这种方法也可以正常工作，只需要将User替换为User[]即可。

需要注意的是，TypeScript没有运行时类型检查，所以类型注解的变量不一定是类的实例。例如Angular教程中的hero对象，它只是一个类型注解的变量，并不一定是Hero类的实例。

问题的作者遇到的问题是他的log命令在响应到达之前就被执行了。这与你的答案无关。此外，他要求一个"完整的User对象"，我理解为User类的实例。所以即使他的log命令在正确的位置，你的答案也是错误的，因为它将返回一个普通对象，而不是User类的实例。

最后，有一个回答者登录并点赞了你的答案，因为它确实对他有帮助。

将任意对象（来自响应）强制转换为Users类。这将导致一个Partial对象，它只是简单地映射属性。这不是一个完整的对象，所以这不是这个问题的答案。User类的任何方法都不会起作用，包括getter/setter、构造函数和所有其他方法，因为它们在Partial上不存在。

0
0 Comments

Angular2 HTTP GET - Cast response into full object这个问题的出现的原因是因为在接收到HTTP GET请求的响应之前，控制台就已经打印了一个未定义的用户对象。即使在正确的位置执行了console.log语句，也会被一个普通对象（this.user = user）覆盖掉，而这个对象不再是User的实例。这个问题的解决方法是将响应数据转换为User对象。

解决方法是在构造函数中使用HTTP GET请求获取用户数据，并使用map()方法将响应转换为JSON对象。然后，通过订阅subscribe()方法，将JSON对象传递给User的fromJSON()方法，将其转换为完整的User对象。

在这个解决方法中，还对Serializable类进行了增强，在fromJSON()方法中返回了对象本身，这样就可以直接调用new User().fromJSON(json)来转换JSON对象。

在Angular 6中，map()方法的使用方式发生了变化，需要注意。

总结一下，从这个解决方法中可以得出以下结论：

1. 在获取HTTP响应之前打印对象会导致对象为undefined。

2. 使用map()方法将响应转换为JSON对象。

3. 使用subscribe()方法将JSON对象传递给fromJSON()方法进行转换。

4. 可以对Serializable类进行增强，使其返回对象本身。

5. 在Angular 6中，map()方法的使用方式发生了变化。

根据经验来看，原始问题的根源在于其他错误。

以上就是关于Angular2 HTTP GET - Cast response into full object问题的原因和解决方法的整理。

0
0 Comments

Angular2中的HTTP GET请求返回的响应数据无法直接转换成完整的对象，这是由于TypeScript本身的限制。在这个问题中，用户尝试将返回的JSON对象转换成一个TypeScript类的实例，但是无法直接进行类型转换。虽然绑定到数据的过程可以正常进行，但是绑定的变量在日志中被打印出来却是undefined。这是因为JSON和对象在TypeScript/JS中是可以互换的，但是创建的对象只包含JSON中的字段，而不包含在实际类的原型中定义的方法或其他字段。

解决方法是在订阅HTTP请求的回调函数中进行类型转换。首先，将数据转换成一个新的User对象，并将其赋值给this.user。然后，在回调函数中打印this.user的值。这样就可以正确地获取到绑定到视图中的对象。

另外，还有一个错误是在执行日志打印语句之前执行了HTTP请求。由于this.http.get()是异步的，它会将任务放入浏览器的事件队列中以供稍后执行，然后继续执行JS代码（包括日志命令）。当HTTP请求完成时，传递给.subscribe(...)的回调函数才会被执行，但是这个执行过程要晚很多。因此，需要将日志打印语句放入.subscribe((user: User) => { ... });中，以确保在获取到响应数据后再进行打印。

0