Angular CLI，post 向本地请求 API，返回 null

Question

这个问题我以前问过，但我想我可能已经缩小了错误的可能性，所以我在更具体的情况下再问一次。

我正在尝试在 angular 应用程序中对本地 API 执行此 post 请求，但它只是 returns 空。 API 正在独立运行，大部分代码似乎都在我的应用程序中运行，但显然缺少某些东西导致它无法运行。

我的代码似乎成功调用了 api，因为如果我使用字符串而不是对象（API 期望的对象）对其进行测试，我会在我在其中启动 API 与 npm start

的控制台

下面是我的代码，提示用户输入字符串，以及将字符串转换为对象并尝试将其传递到我的 post 请求中的代码。

1/app.component.html

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Enter your String bellow:';
  result;

  constructor(private http: HttpClient) {}

    onSubmit(textEnter: string) {
      let json = {
      "string": textEnter
    };

      console.log(json);
      return this.http.post('http://localhost:3000/parentheses/', json).toPromise().then((data:any) => {
        console.log("testing");
        this.result = data.json;
      });
    }
}

2/app.components.ts

<div>
  <form>
     <input #textEnter placeholder="text">
     <button type="submit" (click)="onSubmit(textEnter.value)">click here</button>
  </form>

  <pre>
    {{ (result | async) | json }}
  </pre>

</div>

我还创建了一个 proxy.config.json 文件：

{
  "/parentheses":{
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel1": "debug"
  }
}

感谢您的帮助！

Answer 1

按如下方式更改您的代码。在您的代码中，您在 html 代码中使用异步管道。但是 'result' 变量不是可观察类型变量。

    export class AppComponent {
          title = 'Enter your String bellow:';
          result: Observable<any>;
        
          constructor(private http: HttpClient) {}

          onSubmit(textEnter: string) {
              let json = { string: textEnter};
              this.result = this.http.post('http://localhost:3000/parentheses/', json);
          }
    }

或

像这样更改您的 HTML 代码。 但由于您的代码不需要返回 http 请求。

<pre>
   {{ result | json }}
</pre>

Angular CLI，post 向本地请求 API，返回 null

Angular CLI, post request to a local API, returning null

api

post

json

angular-cli

angular