如何在Angular中调用JavaHTTPPOST方法

我有以下问题：我使用Spring boot和MyBatis创建了一个Java项目，我有一些类（例如DirezioneRegional）、MyBatis的映射器接口（以及相应的XML文件）、服务类和控制器。 我测试了HTTP调用，它们正常工作（我能够看到查询的结果，并且它们是正确的）

您可以在这里看到我是如何实现Java和MyBatis部分的：

现在的问题是，这是一个更大项目的一部分，在这个项目中，我使用Angular 8，我应该能够调用HTTP POST方法，并使用JSON返回与我的Java类等效的TypeScript

为此，我尝试了以下方法：

在app.component.ts中，我添加了：

allDirReg = this.piuService.getAllDirReg();

<p>{{ allDirReg }}</p>

在app.component.html中，我添加了：

allDirReg = this.piuService.getAllDirReg();

<p>{{ allDirReg }}</p>

出现了

我甚至尝试用以下方式更改app.component.ts文件中的行：

allDirReg = JSON.stringify(this.piuService.getAllDirReg());

但结果是：

{
   "_isScalar": false,
   "source": {
      "_isScalar": false,
      "source": {
         "_isScalar": false,
         "source": {
            "_isScalar": true,
            "value": {
               "url": "localhost:8081/getAllDirRegs",
               "body": null,
               "reportProgress": false,
               "withCredentials": false,
               "responseType": "json",
               "method": "POST",
               "headers": {
                  "normalizedNames": {},
                  "lazyUpdate": null,
                  "headers": {}
               },
               "params": {
                  "updates": null,
                  "cloneFrom": null,
                  "encoder": {},
                  "map": null
               },
               "urlWithParams": "localhost:8081/getAllDirRegs"
            }
         },
         "operator": {
            "concurrent":1
         }
      },
      "operator": {}
   },
   "operator": {}
}

我的服务在Angular中的代码如下：

  getAllDirReg() {
    const doneCallback = this.loadingService.startLoading();
    return this.http.post<any>(`localhost:8081/getAllDirRegs`, {}).pipe(finalize(doneCallback))
  }

编辑3: 我的app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  constructor(
    private piuService: PiuService) {
  }
  title = "PIU Versione 2";

  allDirReg = this.piuService.getAllDirReg().subscribe(bodyRes => { this.allDirReg = JSON.stringify(bodyRes)})

}

---

您在那里看到的JSON是

可观察类的结构

HttpClient.post
方法返回一个
Observable
，您必须在该方法上调用
subscribe
方法，以便在收到服务器响应后处理该响应。这是一种异步机制

例如：

...
this.piuService.getAllDirReg().subscribe(bodyRes=> { this.allDirReg = bodyRes });
...

这是为了访问响应主体，但您可以访问响应本身。看看HttpClient方法定义。你可以提供一些选择来得到你想要的

编辑：由于您没有为post方法提供选项，我假设默认的
observe
选项是HttpResponse。似乎是身体本身。我已经在consequence中编辑了这个示例

EDIT2：在看到您的组件类之后，有些事情是错误的。应该工作的版本：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  constructor(private piuService: PiuService) {
  }
  title = "PIU Versione 2";
  allDirReg = "";

  ngOnInit() {
    this.piuService.getAllDirReg().subscribe(bodyRes => { this.allDirReg = JSON.stringify(bodyRes)})
  }
}

但在本例中，您使用的是字符串化模型，这不是主要目标。在使用TS和Angular时，应该使用已定义的类模型。我建议你遵循一个角度教程。您可以尝试使用Google的Angular入门教程Tour of Heroes。
您能显示服务器的实际响应吗？如果我这样做，我会出现以下错误：“TS2663:找不到名称‘allDirReg’。您是指实例成员‘this.allDirReg’？”如果我用this.allDirReg替换allDirReg，然后stringify，我的浏览器上就不会打印任何内容，如果没有stringify，我就有相同的“[object]”响应眼。。我的错误，请使用
this.allDirReg
。你可以试试：
this.piuService.getAllDirReg（）.subscribe（bodyRes=>{this.allDirReg=JSON.stringify（bodyRes）}）现在IDE显示：TS2322:Type'string'不可分配给Type'Subscription'。您可以编辑您的帖子并显示您的app.component.ts吗？如果没有codeEdited，很难判断出什么是错误的，它会以这种方式给我错误，或者如果我在写这篇文章之前或刚写这篇文章时声明allDirReg。。。未经声明
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  constructor(private piuService: PiuService) {
  }
  title = "PIU Versione 2";
  allDirReg = "";

  ngOnInit() {
    this.piuService.getAllDirReg().subscribe(bodyRes => { this.allDirReg = JSON.stringify(bodyRes)})
  }
}