asp.net - 使用 Angular 9 在 Asp.Net Core Web API 中发布数据(发布请求)时出错
问题描述
我在 Angular 中的发布请求中遇到错误。我正在使用 Bootstrap 数据切换模式弹出
数据 HTML: 父: 当我单击按钮 onEdit() 时,弹出窗口通过显示编辑 Html 页面打开。
<tr *ngFor="let data of recData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.division}}</td>
<td>{{data.total2}}</td>
<td>
<button class="btn btn-primary small btn-sm mr-1" (click)="onEdit()" //<-- How to pass Id
data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-pencil-alt"></i>
</button>
</td>
数据传输:
onEdit(){
this.dialog.open(EditCollComponent);
}
Edit HTML: Child 它是 Data.html 中的一个弹出窗口
<form [formGroup]="editCollectionForm" autocomplete="off" (submit)="onSubmit()">
<div class="form-row">
<div class="form-group col-md-12">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">ID</span>
</div>
<input type="number" formControlName="Id" class="form-control" style="background-
color:rgb(255, 159, 128);" required >
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i
class="fa fa-calander mr-1"></i>User Name</span>
</div>
<input type="text" formControlName="Name" class="form-control">
</div>
</div>
<div class="form-group col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i
class="fa fa-calander mr-1"></i>Date</span>
</div>
<input type="date" formControlName="PostDateTime" class="form-control">
</div>
//etc..
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i
class="fa fa-calander mr-1"></i>Net Amount</span>
</div>
<input type="number" formControlName="Total2" class="form-control" readonly>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-secondary" >Reset</button>
<button type="submit" class="btn btn-primary">Update changes</button>
</div>
</form>
编辑ts:
ngOnInit(): void {
this.editCollectionForm = this.fb.group(
{
Id:null,
PostDateTime:null,
Division:null,
Name:null,
NetCash:null,
CellPay2:null,
Card2:null,
PhonePay2:null,
Ecom2:null,
Other2:null,
Total2:null,
});
}
onSubmit(){
console.log(this.editCollectionForm.value);
this.salesService.editData(this.editCollectionForm.value).subscribe(
(res: any) => {
console.log(this.editCollectionForm.value);
this.editSalesColl = res;
console.log(this.editSalesColl);
},
err => {
if (err.status == 400)
this.toastr.error('Invalid User Input !!', 'Authentication failed.');
else
this.toastr.error('Network error', 'Authentication failed.');
//this.loadSpinner.hide();
}
);
}
服务 ts: data:EditsalesClass 是类
editData(data:EditsalesClass){
return this.http.post('https://localhost:44372/api/Report/EditSalesCollection', data);
}
它是一种发布方法
当我从 Postman 发送数据时,它可以工作 200 Ok 但不能使用角度形式(错误:POST https://localhost:44372/api/Report/EditSalesCollection 400) 为什么我无法在 asp.net 核心的控制器中发送数据web api,但它在 Postman 中工作。 这段代码有什么问题吗??请帮我解决这个问题..
我正在使用 Sql 过程来更新数据..
解决方案
单击编辑按钮后如何传递ID?请参阅 Data html 中的上述代码。
首先,您可以将 id 添加到按钮属性data_id
,并将$event传递给 onEdit 函数:
<button class="btn btn-primary small btn-sm mr-1" (click)="onEdit($event)"
id="{{data.id}}" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-pencil-alt"></i>
</button>
数据传输:
onEdit(event){
var target = event.target || event.srcElement || event.currentTarget;
var idAttr = target.attributes.id;
var value = idAttr.nodeValue; // here is the id value
this.dialog.open(EditCollComponent);
}
这是调试结果:
推荐阅读
- java - 首次渲染后屏幕外渲染损坏
- javascript - Sequelize - 外键始终为空
- java - SSLHandshakeException:没有适当的协议协议被禁用或密码套件不合适
- postgresql - 我可以使用 pg_dump 从未加密的 postgres 数据库迁移到加密的数据库吗?
- flutter - 如何通过GETX验证电子邮件、密码和登录信息?
- graphql - 在由团队成员创建的组织中查询打开的拉取请求?
- javascript - 如何向不执行第一个按钮处理程序函数的反应表单添加第二个按钮?
- swift - ScrollView 在滚动时移动内容
- sql-server - 如何找出导致 DbContext.SaveChanges FK 冲突失败的确切实体
- javascript - 如何从 odnoklassniki (ok.ru) 获取直接视频链接