时间戳

首页 > 解决方案 > Jhipster - Angular HTTP Get 请求从未执行

spring - Jhipster - Angular HTTP Get 请求从未执行

问题描述

我在 Web 项目中使用 JHipster 框架。我是新手，所以我有一些问题。我尝试实现从按钮到后端的 API 调用。我想要该按钮Resolve，当它被单击以调用一个方法时，该方法会转到服务以进行实际的 API 调用。现在有问题了。当我在我的服务中访问 resolveFile 方法时，我会收到所有警报，但不会收到 API 调用。当我尝试直接访问从 Postman 拨打电话的后端时，它运行良好。问题似乎出在myFile.service.ts文件中。你有什么建议吗？

myFile.component.html：

<button (click)="resolveFile(myfile.id)" class="btn-dark btn btn-sm">
    <span class="fa fa-beer"></span>
    <span class="d-none d-md-inline" >Resolve</span>
</button>

myFile.component.ts：

resolveFile(id) {
    alert('mpika1');
    this.myfileService.resolveFile(id);
}

我的文件.service.ts

private resourceUrl = SERVER_API_URL + 'api/my-file/resolve';
resolveFile(id: String): Observable<EntityResponseType> {
    debugger;
    alert();
    this.http.get(`${this.resourceUrl}/${id}`);
    alert();
    return null;
}

我的文件资源.java

@GetMapping("/my-file/resolve/{id}")
public ResponseEntity<MyFileDTO> resolveFile(@PathVariable String id)
{
    log.debug("REST request to resolve myFile: {}", id);

    // TODO
    myService.resolveFile(id);
    return null;
}

标签： springangularrestmodel-view-controllerjhipster

解决方案

你必须订阅它。

this.http.get(`${this.resourceUrl}/${id}`).subscribe((res) =>{
  //res -> response output
});

Angular 使用名为rxjs的库，更多信息https://angular.io/guide/rx-library

为了更好的实现，最好返回Observable而不是返回null

我的文件.service.ts

private resourceUrl = SERVER_API_URL + 'api/my-file/resolve';
resolveFile(id: String): Observable<EntityResponseType> {
    return this.http.get(`${this.resourceUrl}/${id}`);
}

myFile.component.ts

resolveFile(id) {
   //In here you could wait the response
    this.myfileService.resolveFile(id).subscribe((res) =>{
      //res -> response output
      alert('mpika1');
    });;
}

推荐阅读