[英]Get result from http get request Angular7
Totally lost my mind. 完全失去了理智。 I'm confused.
我糊涂了。 My goal is to get reply from my backend server.
我的目标是从后端服务器获得答复。 Here how it works: GET http://localhost:12345/createUser.php?name=John&age=40 returns me this json:
它是这样工作的:GET http:// localhost:12345 / createUser.php?name = John&age = 40向我返回此json:
{
"id":"91",
"name":"John",
"age":40,
"birthday":"null"
}
I'd like to send this get request via angular and show reply to the page. 我想通过angular发送此get请求并显示对页面的回复。 I ONLY need id and name.
我只需要ID和名称。 So, I create model:
因此,我创建模型:
export class User {
id:string;
name:string;
}
And trying to get reply. 并试图得到答复。 Here's my two tryes: 1. Just code inside app.component.ts:
这是我的两个尝试:1.只需在app.component.ts中进行编码:
export class AppComponent implements onInit{
user:User;
constructor(private http:HttpClient) { }
createUser(){
this.user = this.http.get("http://localhost:12345/createUser.php?name=test&age=20");
}
}
and create button and text-div in app.component.html to display it: 并在app.component.html中创建按钮和text-div以显示它:
<button (click)="createUser()">Create test user!</button>
<div ><h2>{{user.id}} {{user.name}} </h2></div>
Aaand.. no result here. Aaand ..没有结果。 But, if I code html like "{{user | json}}", then I get some reply, but it's just request info like this:
但是,如果我编写类似“ {{user | json}}”的html,那么我会得到一些回复,但这只是请求信息,如下所示:
{ "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": true, "value": { "url": "http://localhost:12345/createUser.php?name=John&age=40", "body": null, "reportProgress": false, "withCredentials": false, "responseType": "json", "method": "GET", "headers": { "normalizedNames": {}, "lazyUpdate": null, "headers": {} }, "params": { "updates": null, "cloneFrom": null, "encoder": {}, "map": null }, "urlWithParams": "http://localhost:12345/createUser.php?name=John&age=40" } }, "operator": { "concurrent": 1 } }, "operator": {} }, "operator": {} }
export class DataService {
apiUrl="http://localhost:12345/createUser.php?name=John&age=40";
constructor(private http:HttpClient) { }
public createUser()
{
return this.http.get<User>(this.apiUrl);
}
}
and app.component: 和app.component:
user:User;
ngOnInit()
{
return this.dataService.createUser().subscribe(data=>this.user=data);
}
No success. 没有成功 But user is created at my server on both ways.
但是用户是通过两种方式在我的服务器上创建的。 I see that I don't understand some basics, but can't find any good explanation on web.
我发现我不了解一些基本知识,但是在网络上找不到任何好的解释。 Could you please help me?
请你帮助我好吗?
First of make sure your api/service is working as expected, i mean its actually returning the required response as you have stated above. 首先,请确保您的api /服务能够按预期工作,我的意思是它实际上返回了您如上所述的所需响应。 Also here is a sample code i have created
这也是我创建的示例代码
constructor(private httpClient: HttpClient){}
name = 'Angular';
data: Data;
getData(){
return this.httpClient.get<Data>(`https://swapi.co/api/people/1/`);
}
ngOnInit(){
this.getData().subscribe((res: Data)=>{this.data = res;})
}
export interface Data{
name: string;
height: string;
}
<p>
Name : {{data.name}} <br>
Height: {{data.height}}
</p>
You see this piece of code working here Stackblitz . 您会在Stackblitz上看到这段代码。 Hope this helps :).
希望这可以帮助 :)。 Let me know if you still face issues.
让我知道您是否仍然遇到问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.