Angular CLI，将请求发布到本地 API，返回 null

Question

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

我正在尝试将此发布请求实现到 Angular 应用程序中的本地 API，但它只返回 null。 API 可以自行运行，大部分代码似乎都可以在我的应用程序中运行，但显然缺少一些使其无法运行的东西。

我的代码似乎成功调用了 api，因为如果我使用字符串而不是对象（API 所期望的）来测试它，我会在控制台中收到一条错误消息，在该控制台中我与 @ 并行启动了 API 987654322@

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

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 代码中使用异步管道。但是“结果”变量不是可观察类型的变量。

    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>