Angular ngForm中的Http POST请求错误

Question

我想用我的 Angular SPA 向我的 MSSQL 数据库添加新记录，但是当我发送表单时，我什么也没得到，只有错误 400 - 错误请求。我认为这只是 SPA 的错误，因为当我使用 Postman 对其进行测试时，一切正常。

我的POST 正文应该是这样的：

{
    "Nazwa": "String",
    "Opis": "Another String",
    "Ownerusername": "Another String",
    "Ends": "1976-07-28"
}

于是我在eventcreator.component.ts中做了一个简单的模型：

import { Component, OnInit } from '@angular/core';
import { EventService } from '../_services/evncreator.service';
declare let alertify: any ;

@Component({
  selector: 'app-eventcreator',
  templateUrl: './eventcreator.component.html',
  styleUrls: ['./eventcreator.component.css']
})
  // declare let alertify;

export class EventcreatorComponent implements OnInit {
  model: any = [];
  constructor(private evntservice: EventService) {}

  ngOnInit() {}

  evnCreate() {
    // this.model = JSON.parse(this.model);
    this.evntservice.eventCreate(this.model).subscribe(
      () => {
        alertify.success('Utworzono wydarzenie');
      },
      error => alertify.error('Wystąpił błąd')
    );
    console.log(this.model);
  }

  evnAbort() {
    window.location.href = '/';
  }
}

这个脚本使用evntservice.component.ts，所以我也想附上它：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable({
  // dekorator
  providedIn: 'root'
})
export class EventService {

  constructor(private http: HttpClient) {}

  eventCreate(model: any) {
    return this.http.post('http://localhost:5000/api/Events', model);
  }

}

我的eventcreator.component.html 看起来像这样：

<form #registerForm="ngForm" (ngSubmit)="evnCreate()">
  <div class="content p-3 ml-4 mr-4 bg-white">
    <h1 class="display-2 text-dark text-center">Kreator wydarzeń</h1>
  </div>
  <div class="content">
    <div class="content ml-4 mr-4 p-3 bg-warning">
      <h1 class="ml-2 mt-4 mb-4 text-center">Nazwa wydarzenia:</h1>
      <input
        class="form-control mt-3 mb-3 p-lg-4 "
        [(ngModel)]="model.Nazwa"
        name="Nazwa"
        required
      />
      <div class="text-break"></div>
      <h1 class="ml-2 mt-4 mb-4 text-center">Opis wydarzenia:</h1>
      <textarea
        class="form-control mt-3 mb-3 p-lg-4"
        required
        [(ngModel)]="model.Opis"
        name="Opis"
      ></textarea>
      <div class="text-break"></div>
      <h1 class="ml-2 mt-4 mb-4 text-center">Data wydarzenia:</h1>
      <input
        type="text"
        class="form-control"
        required
        name="Ends"
        [(ngModel)]="model.Ends"
      />
      <div class="text-break"></div>
      <h1 class="ml-2 mt-4 mb-4 text-center">Organizator:</h1>
      <input
        class="form-control text-success mt-3 mb-3 p-lg-4 "
        required
        name="Ownerusername"
        [(ngModel)]="model.Ownerusername"
      />
      <div class="text-center">
        <button
          type="submit"
          class="btn mr-2 btn-success"
          (click)="evnCreate()"
        >
          Dodaj wydarzenie
        </button>
        <button
          type="button"
          class="btn ml-2 btn-secondary"
          (click)="evnAbort()"
        >
          Anuluj
        </button>
      </div>
    </div>
  </div>
</form>

另外，我想包含模型的输出和网络监视器的响应：

[Nazwa: "nlnkizcxczx", Opis: "zcxczxzxczxczcx", Ends: "2020-03-04", Ownerusername: "PanMichal"]
Nazwa: "nlnkizcxczx"
Opis: "zcxczxzxczxczcx"
Ends: "2020-03-04"
Ownerusername: "PanMichal"

网络监控：

Answer 1

如您所说，POST 正文应类似于对象下方：

{ “纳兹瓦”：“字符串”， "Opis": "另一个字符串", "Ownerusername": "另一个字符串", “结束”：“1976-07-28” }

但是你发送一个数组

[ 纳兹瓦：“nlnkizcxczx”， 作品：“zcxczxzxczxczcx”， 结束：“2020-03-04”， 所有者用户名：“PanMichal” ]

• 因此您应该尝试发送对象而不是数组。

希望有帮助

Answer 2

已修复！

我做了什么：

我换了

  model: any = [];

收件人：

  model: any = {};