Question

在此处使用Angular 6和C＃。

在我的表单的按钮单击事件上，我想保存数据。该事件将调用保存数据的API。

以下是我的按钮点击事件：

submitData() {

      //After getting form values I create an object as below
      let myData = 
      {
        "name":name,
        "date": date,
        "status": status,
        "selection":selection,
        "createdBy": createdBy
      };

   this.myService.save(myData)
    .subscribe(
     (jsonData) => {
        //redirect etc after save

     });  
 }

在我上面的事件中，选择本身将对象数组保存为：

  0: {name: "u1", id: "123", type:"dev", comment: "comment1"}
  1: {name: "u2", id: "456", type:"prd", comment: "comment2"}

下面也是我的服务电话：

   saveExtract(data) {
    return this.httpClient.post<any>(this.url + '/Save', data)
  .pipe(
    catchError())
);

}

最后是我的c＃API；

 [HttpPost("Save", Name = "Save")]
    public async Task Save([FromBody] SaveModel data)
    {
       //do save here etc
    }

但是上面的代码返回了我400（错误请求）错误。

我什至尝试将断点放在我的api中，但从未成功。

当我打电话给我的帖子时，看起来好像有问题。

任何人都可以指出问题吗？

谢谢

---更新---

所以我错过了通过httpOptions并使用Json.stringify的代码。通过后，其部分工作方式如下：

const httpOptions = {
      headers: new HttpHeaders({
      'Content-Type': 'application/json'       
      })
    };

 saveExtract(data) {
    return this.httpClient.post<any>(this.url + '/Save', data, httpOptions)
  .pipe(
    catchError())
);

 this.myService.save(JSON.stringify(myData))
.subscribe(
 (jsonData) => {
    //redirect etc after save

 });

当我注释掉选择数组时，上面的代码有效，这是我要传递给API的数据的一部分。但是，当我通过选择数组时，它不起作用并且给出了严重的请求错误。

任何人都可以指出如何将对象数组传递给它。

Answer 1

这是将数组发送到.net核心的有效演示，请检查代码中的差异。

客户端角度

export class FetchDataComponent {
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {

    let selection = [{ "name": "n1", "id": 1 }, { "name": "n2", "id": 2 }, { "name": "n3", "id": 3 }];
    let myData =
    {
    "name": "Tom",
    "selection": selection,
    };
    http.post<any>(baseUrl + 'api/SampleData/Save', myData).subscribe(result => {

    });
}
}

服务器端。

[Route("api/[controller]")]
public class SampleDataController : Controller
{       
    [HttpPost("Save", Name = "Save")]
    public async Task Save([FromBody] SaveModel data)
    {
        //do save here etc
    }       
}

public class SaveModel
{
    public string Name { get; set; }
    public List<MySelection> Selection { get; set; }
}
public class MySelection
{
    public int Id { get; set; }
    public string Name { get; set; }
}

另一个节点，您可以在下面的Startup.cs中添加代码，以避免api模型验证过滤器。

services.AddMvc()
    .SetCompatibilityVersion(CompatibilityVersion.Version_2_2)
    .ConfigureApiBehaviorOptions(options =>
    {
        options.SuppressModelStateInvalidFilter = true;
    });

Answer 2

如果您使用的是.NET Core WEB API（因为您还标记了.NET Framework API）：

    [HttpPost]
    [Route("Save")]
    public async Task Save(SaveModel data)
    {
       //do save here etc
    }

请注意，您需要显式设置Route，该路由可能与方法的名称不同

Angular：调用帖子时出现错误的请求错误

2 个答案: