Question

完全失去了理智。我很困惑。我的目标是从后端服务器获得答复。工作原理如下：GET http://localhost:12345/createUser.php?name=John&age=40向我返回此json：

{
    "id":"91",
    "name":"John",
    "age":40,
    "birthday":"null"
}

我想通过angular发送此get请求并在页面上显示回复。我只需要ID和名称。因此，我创建了模型：

export class User {
    id:string;
    name:string;
}

并试图获得答复。这是我的两个尝试： 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"); 
  }
}

并在app.component.html中创建按钮和text-div以显示它：

<button (click)="createUser()">Create test user!</button> 
<div ><h2>{{user.id}} {{user.name}} </h2></div>

Aaand ..没有结果。但是，如果我将html这样的代码编写为“ {{user | json}}”，那么我会得到一些答复，但这只是要求提供以下信息：

{ "_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);
  }
}

和app.component：

user:User;
ngOnInit()
  {
    return this.dataService.createUser().subscribe(data=>this.user=data); 
  }

没有成功。但是用户是通过两种方式在我的服务器上创建的。我发现我不了解一些基本知识，但是在网络上找不到任何好的解释。你能帮我吗？

Answer 1

首先请确保您的api /服务能够按预期运行，我的意思是它实际上返回了您如上所述的所需响应。这也是我创建的示例代码

  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>

您会看到这段代码在Stackblitz上工作。希望这可以帮助：）。让我知道您是否仍然遇到问题。

从http获取结果Angular7获取请求

1 个答案: