无法从Angular 4获得HTTP响应(Unable to get HTTP response from Angular 4)

无法从Angular 4获得HTTP响应(Unable to get HTTP response from Angular 4)

我正在尝试为我的角应用创建一个登录功能。 我正在使用角度4（它似乎与angularjs不同）

我正在尝试研究如何使用HTTP而我只是卡住了，现在已经持续了大约4个小时。

我在网页上收到此错误：

login.component.ts (29,3): Type 'Promise<User>' is not assignable to type 'User'. Property 'id' is missing in type 'Promise<User>'.

这在控制台上： login.component.ts (30,25): Property 'json' does not exist on type 'User'.

对于我的生活，我似乎无法得到服务器发送的实际响应（见下文）

我已经按照angular.io（ https://angular.io/tutorial/toh-pt6 ）上的HTTP教程进行了操作，并尝试了.subscribe，.map等多种变体。

有人可以看看下面的代码并帮助我吗？

谢谢

这是访问后端的组件。

export class loginComponent { SERVICE_URL = "http://localhost:80/play/classes/index.php?fn=userLogin"; model = new Login("", ""); user: User; constructor(private http: Http) {} onSubmit(){ console.log("submission complete!"); console.log(this.model.username); console.log(this.model.pass); let params: URLSearchParams = new URLSearchParams(); params.set('username', this.model.username); params.set('password', this.model.pass); this.user = this.doLogin(params); console.log(this.user.json); } doLogin(params: URLSearchParams): Promise<User>{ return this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .toPromise() .then(response => response.json().data as User) .catch(this.handleError); } get diagnostic() { return JSON.stringify(this.model); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } }

这是我从服务器获得的响应，但实际上无法在应用程序中使用：

{"id":"3","username":"jamiemac262","password":"123456","dob":"1993-03-24","email":"jamiemac262@xxxx.co.uk","steamID":null,"age":24}

I'm trying to create a login feature for my Angular app. I'm using Angular 4 (which it seems is nothing like Angularjs)

I'm trying to work out how to use HTTP and am just stuck.

I'm getting this error on the webpage:

login.component.ts (29,3): Type 'Promise<User>' is not assignable to type 'User'. Property 'id' is missing in type 'Promise<User>'.

and this on the console:

login.component.ts (30,25): Property 'json' does not exist on type 'User'.

For the life of me I can't seem to get the actual response sent from the server (see below).

I've followed the HTTP tutorial on angular.io (https://angular.io/tutorial/toh-pt6) and I've tried numerous variations with .subscribe, .map, etc

This is the component that accesses the backend:

export class loginComponent { SERVICE_URL = "http://localhost:80/play/classes/index.php?fn=userLogin"; model = new Login("", ""); user: User; constructor(private http: Http) {} onSubmit(){ console.log("submission complete!"); console.log(this.model.username); console.log(this.model.pass); let params: URLSearchParams = new URLSearchParams(); params.set('username', this.model.username); params.set('password', this.model.pass); this.user = this.doLogin(params); console.log(this.user.json); } doLogin(params: URLSearchParams): Promise<User>{ return this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .toPromise() .then(response => response.json().data as User) .catch(this.handleError); } get diagnostic() { return JSON.stringify(this.model); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } }

This is the response I get from the server but can't actually use in the app:

{"id":"3","username":"jamiemac262","password":"123456","dob":"1993-03-24","email":"jamiemac262@xxxx.co.uk","steamID":null,"age":24}

最满意答案

您没有解决访问数据的承诺

this.doLogin(params).then((data=>console.log(data));

使用then运算符获取数据

更新您没有使用json映射并分离observable和promise

doLogin(params: URLSearchParams): Promise<User>{ let promise = this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .map(response => <User>response.json()) .catch(this.handleError); return promise.toPromise(); } this.doLogin(params).then((data)=>console.log(data),()=>{});

You didn't resolve the promise for accessing the data

this.doLogin(params).then((data=>console.log(data));

Use then operator to get the data

Update you are not using json mapping and separate the observable and promise

doLogin(params: URLSearchParams): Promise<User>{ let promise = this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .map(response => <User>response.json()) .catch(this.handleError); return promise.toPromise(); } this.doLogin(params).then((data)=>console.log(data),()=>{});无法从Angular 4获得HTTP响应(Unable to get HTTP response from Angular 4)

我正在尝试为我的角应用创建一个登录功能。 我正在使用角度4（它似乎与angularjs不同）

我正在尝试研究如何使用HTTP而我只是卡住了，现在已经持续了大约4个小时。

我在网页上收到此错误：

login.component.ts (29,3): Type 'Promise<User>' is not assignable to type 'User'. Property 'id' is missing in type 'Promise<User>'.

这在控制台上： login.component.ts (30,25): Property 'json' does not exist on type 'User'.

对于我的生活，我似乎无法得到服务器发送的实际响应（见下文）

我已经按照angular.io（ https://angular.io/tutorial/toh-pt6 ）上的HTTP教程进行了操作，并尝试了.subscribe，.map等多种变体。

有人可以看看下面的代码并帮助我吗？

谢谢

这是访问后端的组件。

export class loginComponent { SERVICE_URL = "http://localhost:80/play/classes/index.php?fn=userLogin"; model = new Login("", ""); user: User; constructor(private http: Http) {} onSubmit(){ console.log("submission complete!"); console.log(this.model.username); console.log(this.model.pass); let params: URLSearchParams = new URLSearchParams(); params.set('username', this.model.username); params.set('password', this.model.pass); this.user = this.doLogin(params); console.log(this.user.json); } doLogin(params: URLSearchParams): Promise<User>{ return this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .toPromise() .then(response => response.json().data as User) .catch(this.handleError); } get diagnostic() { return JSON.stringify(this.model); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } }

这是我从服务器获得的响应，但实际上无法在应用程序中使用：

{"id":"3","username":"jamiemac262","password":"123456","dob":"1993-03-24","email":"jamiemac262@xxxx.co.uk","steamID":null,"age":24}

I'm trying to create a login feature for my Angular app. I'm using Angular 4 (which it seems is nothing like Angularjs)

I'm trying to work out how to use HTTP and am just stuck.

I'm getting this error on the webpage:

login.component.ts (29,3): Type 'Promise<User>' is not assignable to type 'User'. Property 'id' is missing in type 'Promise<User>'.

and this on the console:

login.component.ts (30,25): Property 'json' does not exist on type 'User'.

For the life of me I can't seem to get the actual response sent from the server (see below).

I've followed the HTTP tutorial on angular.io (https://angular.io/tutorial/toh-pt6) and I've tried numerous variations with .subscribe, .map, etc

This is the component that accesses the backend:

export class loginComponent { SERVICE_URL = "http://localhost:80/play/classes/index.php?fn=userLogin"; model = new Login("", ""); user: User; constructor(private http: Http) {} onSubmit(){ console.log("submission complete!"); console.log(this.model.username); console.log(this.model.pass); let params: URLSearchParams = new URLSearchParams(); params.set('username', this.model.username); params.set('password', this.model.pass); this.user = this.doLogin(params); console.log(this.user.json); } doLogin(params: URLSearchParams): Promise<User>{ return this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .toPromise() .then(response => response.json().data as User) .catch(this.handleError); } get diagnostic() { return JSON.stringify(this.model); } private handleError(error: any): Promise<any> { console.error('An error occurred', error); // for demo purposes only return Promise.reject(error.message || error); } }

This is the response I get from the server but can't actually use in the app:

{"id":"3","username":"jamiemac262","password":"123456","dob":"1993-03-24","email":"jamiemac262@xxxx.co.uk","steamID":null,"age":24}

最满意答案

您没有解决访问数据的承诺

this.doLogin(params).then((data=>console.log(data));

使用then运算符获取数据

更新您没有使用json映射并分离observable和promise

doLogin(params: URLSearchParams): Promise<User>{ let promise = this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .map(response => <User>response.json()) .catch(this.handleError); return promise.toPromise(); } this.doLogin(params).then((data)=>console.log(data),()=>{});

You didn't resolve the promise for accessing the data

this.doLogin(params).then((data=>console.log(data));

Use then operator to get the data

Update you are not using json mapping and separate the observable and promise

doLogin(params: URLSearchParams): Promise<User>{ let promise = this.http.get(this.SERVICE_URL, new RequestOptions({"search": params}) ) .map(response => <User>response.json()) .catch(this.handleError); return promise.toPromise(); } this.doLogin(params).then((data)=>console.log(data),()=>{});