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

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

我试图在angular应用程序中实现对本地API的post请求，但它只返回null。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>

---

谢谢你的帮助

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

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

导出类AppComponent{
title='在下面输入字符串：'；
结果：可见；
构造函数（私有http:HttpClient）{}
onSubmit（文本输入：字符串）{
让json={string:textEnter}；
this.result=this.http.post（'http://localhost:3000/parentheses/'，json）；
}
}

或

像这样更改HTML代码但作为代码，不需要返回http请求

{{result}json}

尝试删除异步管道，您将不会返回可观察的<代码>{{result | json}}我的第一个猜测是看xss问题。您正在发送到端口3000，但我敢打赌您的应用程序是从不同的本地端口提供的，您正在通过或类似于端口3000的方式访问它。无论哪种方式，该值最初未定义，并且您没有在模板中处理该值。您应该键入属性，以便更清楚地了解发生了什么，编译器实际上可以帮助您。另外，组件通常不应该直接访问

HttpClient

，我建议大家学习观察。感谢大家的帮助@山姆，不，那没用。事实上，它不再返回

null

，而是什么也不返回@Max我创建了一个代理文件，我在问题中添加了它。这不应该奏效吗@乔恩·夏普，好吧，我得调查一下，这看起来很有希望。但不幸的是，它没有起作用。我仍然得到

null

实际上我得到了这样的结果：

类型“Promise”缺少类型“Observable”中的以下属性：\ isScalar、source、operator、lift等6个。（property）AppComponent.result:Observable

您试图将promise one保存为Observable类型的变量。请确保不要使用“.toPromise（）”。this.result=this.http.post（“”，json）；

    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);
          }
    }

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