使用 Angular 9 在 Asp.Net Core Web API 中發布數據（發布請求）時出錯

Question

我在 Angular 的 post 請求中遇到錯誤。 我正在使用 Bootstrap 數據切換模式進行彈出

數據 HTML：父：當我單擊按鈕 onEdit() 時，彈出窗口通過顯示 Edit 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>

數據TS：

onEdit(){
  this.dialog.open(EditCollComponent);
}

編輯 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);
  }

它是一種 post 方法

當我從 Postman 發送數據時，它可以工作 200 Ok 但不能使用角度形式（錯誤：POST https://localhost:44372/api/Report/EditSalesCollection 400）為什么我無法在 asp.net 核心的控制器中發送數據web api 但它適用於 Postman。 這段代碼有什么問題嗎？？ 請幫我解決這個..

我正在使用 Sql 過程來更新數據..

更新：

Answer 1

單擊編輯按鈕后如何傳遞 id？ 請參閱數據 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>

數據TS：

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);
}

下面是調試結果：