angular - Angular:调用帖子时出现错误请求错误
问题描述
在这里使用 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 (Bad Request) 错误。
我什至尝试将断点放在我的 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 的数据的一部分。但是当我传递选择数组时不起作用并给出错误的请求错误。
那么任何人都可以指出我如何将对象数组传递给它。
解决方案
这是一个将数组发送到 .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;
});
推荐阅读
- java - 关于多线程的Java初学者问题
- javascript - 如何删除旧地图标记并在 Google 地图中更新新标记
- html - 图标不显示
- java - 使用本地 Impala 连接执行单元测试用例
- xml - 如何获取两个标记标签之间的所有元素?
- node.js - 做 pm2 restart 终止正在进行的 rest api
- javascript - 从 addEventListener 函数向 ng-repeat 添加数据不会更新 DOM
- r - 是否可以使用 cdf 在一个图中绘制多个 ecdf 和 cdf?
- java - java.lang.IllegalStateException:无法在 AndroidPlatform、sslSocketFactory 上提取信任管理器
- mysql - 在嵌套集中重复节点名称