Angular-如何获取http-get请求的json值

所以我试图建立一个非常基本的应用程序，让localhost上的Angular项目从localhost上另一个项目获取json。

我有一个方法的服务

get() {
var returnVal;
this.http.get('http://localhost:8080/getAll).subscribe((response: Response) => returnVal = response.json())
return returnVal;
}

这会返回undefined，当我的sub.component.ts将其分配给一个变量时，它不会在html上显示任何内容，而它应该返回json。

HttpGet是一个异步调用，在Get方法完成之前返回returnVal。您可以在异步调用中返回值，或者等待promise解析。例如：

this.http.get('http://localhost:8080/getAll').subscribe((response: Response) => {
returnVal = response.json();
return returnVal;
});

Angular中的

HTTP调用返回异步可观察性-订阅将在调用完成后调用，也就是在执行您的行"return returnVal"之后。

为了更好地理解Angular应用程序，您应该使用这种异步特性，而不是试图以同步的方式等待它。例如，在组件类型脚本中：

valueFromServer: any = null; // This should be set to an actual type, not any, ideally.
onButtonPress() {
this.http.get('http://localhost:8080/getAll').subscribe((response: Response) => {
this.valueFromServer = response.json();
});
}

然后在您的组件模板中，使用以下值执行操作：

<button (click)="onButtonPress()">Load</button>
<p *ngIf="valueFromServer">{{valueFromServer}}</p>
<p *ngIf="!valueFromServer">Not loaded yet.</p>

相关内容

最新更新

热门标签：