Angular 7，POST到.NET核心Web API发送空值

我正试图在.NETCore2.0中通过HTTP从Angular模板表单发布到我的WebAPI。它发送时没有错误，但SQL中的数据具有所有空值（？）。角度前端没有模型（仅在.NET后端），但“newRetireObject”var对象与SQL匹配

这里是component.HTML

    <form #calcForm="ngForm" novalidate (ngSubmit)="onSubmit(calcForm)">
    <div class="container">

      <div class="form-group">
        <label for="create-date">Create Date</label>
        <input type="text" id="create-date" name="create-date" ngModel #RetireCalculatorCreateDate="ngModel" class="form-control" />
    </div>

    <div class="form-group">
        <label for="retireSet">Set Date</label>
        <input type="datetime-local" id="retireSet" name="retireSet" ngModel #RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control" />
    </div>

    <div class="form-group">
        <label for="staffID">Staff ID</label>
        <input type="text" id="staffID" name="staffID" ngModel #RetireCalculatorStaffID="ngModel" class="form-control" />
    </div>

    <div>
            <button type="button" class="btn btn-success" (click)="daysForty()">Generate 1</button>       
            <input type="text" class="text-field w-input" name="fortyDaysDate" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel" [(ngModel)]="fortyDaysDate" />

    </div>

    <button type="submit" class="btn btn-success">Submit</button>

    </div>

    </form>

这是服务。ts

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

@Injectable(

  )

export class CalculatorService {
  private headers: HttpHeaders;
  private accessPointUrl: string = 'http://localhost:52745/api/RetireCalculatorForms';


  constructor(private http: HttpClient) {
    this.headers = new HttpHeaders({'Content-Type': 'application/json; charset=utf-8'});
   }

  public get() {

    return this.http.get(this.accessPointUrl, {headers: this.headers});
  }

  public add(payload) {
    return this.http.post(this.accessPointUrl, payload, {headers: this.headers});
  }

  public remove(payload) {
    return this.http.delete(this.accessPointUrl + '/' + payload.id, {headers: this.headers});
  }

  public update(payload) {
    return this.http.put(this.accessPointUrl + '/' + payload.id, payload, {headers: this.headers});
  }



}

---

事情是这样的。由于您使用的是模板驱动的表单方法，因此必须将

name

属性添加到表单中的每个

input

一旦您这样做，它将作为

表单.value

中的字段提供

因此，这种形式的价值：

<form #calcForm="ngForm" novalidate (ngSubmit)="onSubmit(calcForm)">
  <div class="container">

    <div class="form-group">
      <label for="create-date">Create Date</label>
      <input type="text" id="create-date" name="RetireRecord" ngModel #RetireCalculatorCreateDate="ngModel" class="form-control" />
    </div>

    <div class="form-group">
      <label for="retireSet">Set Date</label>
      <input type="datetime-local" id="retireSet" name="RetireCalculatorSetDate" ngModel #RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control" />
    </div>

    <div class="form-group">
      <label for="staffID">Staff ID</label>
      <input type="text" id="staffID" name="staffID" ngModel #RetireCalculatorStaffID="ngModel" class="form-control" />
    </div>

    <div>
      <button type="button" class="btn btn-success" (click)="daysForty()">Generate 1</button>
      <input type="text" class="text-field w-input" name="fortyDaysDate" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel" [(ngModel)]="fortyDaysDate" />
    </div>

    <button type="submit" class="btn btn-success">Submit</button>

  </div>
</form>

---

如您所见，这仍然不会生成

RetireCalculatorDay60

和

RetireCalculatorDay90

的值。因此，您可能希望将这些内容的输入也添加到表单中。

我想看看您的api代码。第一个猜测是，要么你的情况是错误的，要么你没有发送你认为你正在发送的东西。console.log（）是否显示了预期的数据？chrome或firebug中的网络选项卡是否显示了预期的http事务？是的，控制器收到了成功的请求，没有错误。数据为null，因为我没有将name属性与HTML中的模型名匹配。Thnx！谢谢，成功了！我知道我需要name属性，但没有意识到它应该有相同的名称。我正在尝试将当前日期/时间发送到init上的“RetireCalculatorCreateDate”输入。您可以在我的代码中看到我的尝试。它不起作用了。有什么建议吗？我想知道如何获得当前日期/时间。记得我需要用。。。要绑定的输入标记中的[（ngModel）]=“RetireCalculatorCreateDate”（而不是上面代码中的状态）。希望这是最佳实践。模板中已经存在的输入控件不需要与

[（ngModel）]

绑定。他们只需要给这个模型一个指令

ngModel

和一个name属性。然后相同的名称将反映在表单的字段值中。

<form #calcForm="ngForm" novalidate (ngSubmit)="onSubmit(calcForm)">
  <div class="container">

    <div class="form-group">
      <label for="create-date">Create Date</label>
      <input type="text" id="create-date" name="RetireRecord" ngModel #RetireCalculatorCreateDate="ngModel" class="form-control" />
    </div>

    <div class="form-group">
      <label for="retireSet">Set Date</label>
      <input type="datetime-local" id="retireSet" name="RetireCalculatorSetDate" ngModel #RetireCalculatorSetDate="ngModel" [(ngModel)]="retireSet" class="form-control" />
    </div>

    <div class="form-group">
      <label for="staffID">Staff ID</label>
      <input type="text" id="staffID" name="staffID" ngModel #RetireCalculatorStaffID="ngModel" class="form-control" />
    </div>

    <div>
      <button type="button" class="btn btn-success" (click)="daysForty()">Generate 1</button>
      <input type="text" class="text-field w-input" name="fortyDaysDate" value="fortyDaysDate" ngModel #RetireCalculatorDay45="ngModel" [(ngModel)]="fortyDaysDate" />
    </div>

    <button type="submit" class="btn btn-success">Submit</button>

  </div>
</form>

{
  RetireRecord: SOME VALUE,
  RetireCalculatorSetDate: SOME VALUE,
  staffID: SOME VALUE,
  fortyDaysDate: SOME VALUE
}