使用 angular 向服务器发出 post 请求

Question

我正在尝试创建一些数据并将其放入 url 中，只是为了验证在 angular 中使用 post 方法的工作知识。我使用的 url 是来自 'http://jsonplaceholder.typicode.com/' 的 'http://jsonplaceholder.typicode.com/posts'。在主页上它说支持所有 Http 方法。我正在尝试提交一些简单的数据，抛出我按照在线教程创建的表格。当我去刷新 url 时，我的数据没有与其他已经存在的数据一起出现，有人知道为什么我无法创建或发送任何数据吗？我已附上我的组件和模板。

<h1>Post API in Angular</h1>
<form #signupForm="ngForm" (ngSubmit)="submit(signupForm.value)">
    <input type="text" name="userId" ngModel placeholder="User ID"><br><br>
    <input type="text" name="id" ngModel placeholder="ID"><br><br>
    <input type="text" name="title" ngModel placeholder="Title"><br><br>
    <input type="text" name="body" ngModel placeholder="Body"><br><br>
    <button type="submit">Submit Data</button>
</form>

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

@Component({
  selector: 'post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})


export class PostComponent {
  private url = 'http://jsonplaceholder.typicode.com/posts';
  myData: any[];
  constructor(private http: HttpClient){
    http.get(this.url)
      .subscribe(response=>{
        this.myData = response as any[];
      })
  } 
  constructor(private http: HttpClient){}
  submit(data){
    this.http.post(this.url, data)
      .subscribe(result=>{
        console.log("Result", result);
      });
  }
}

Answer 1

jsonplaceholder.typicode.com 的 API 后端不存储您的表单数据。所以 http.get() 将 return 永远只是 the posts in here，仅此而已。

在 guide 的 创建资源 部分有一条评论：

Important: resource will not be really updated on the server but it will be faked as if.

使用 angular 向服务器发出 post 请求

Making a post request to server using angular

post

http-post

typescript

angular