Angular + asp.net：删除和更新请求不起作用

Question

您好，我正在尝试使用 angular + asp.net + mssql 编写应用程序。控制器在后端工作，但在 agular 中调用 DELETE 和 UPDATE 时它们不起作用。 POST 和 GET 确实如此。

错误：

我想它应该是 https://localhost:44348/Games/{id} 但它是 /Games/:

不知道问题出在哪里。我的控制器：

        [HttpDelete("{id}")]
    public async Task<IActionResult> DeleteGame(int id)
    {
        var query = new DeleteGameCommand(id);
        var result = await _mediatr.Send(query);
        return result != null ? Ok() : NotFound();
    }

我在 angular 的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  readonly APIUrl = "https://localhost:44348"

  constructor(private http:HttpClient) { }

  getGameList():Observable<any[]>{
    return this.http.get<any>(this.APIUrl+'/Games');
  }

  addGame(val:any){
    return this.http.post(this.APIUrl+'/Games',val);
  }

  updateGame(val:any){
    return this.http.put(this.APIUrl+'/Games/', val);
  }

  deleteGame(val:any){
    return this.http.delete(this.APIUrl+'/Games/',val);
  }

  getGamesByName(val:any){
    return this.http.get<any>(this.APIUrl+'/Games/', val);
  }
}

Angular component.html

<tbody>
        <tr *ngFor="let dataItem of GameList">
            <td>{{dataItem.id}}</td>
            <td>{{dataItem.name}}</td>
            <td>{{dataItem.description}}</td>
            <td>{{dataItem.avaiable}}</td>
            <td>{{dataItem.fee}}</td>
            <td>
                <button type="button" class="btn btn-light mr-1" data-bs-toggle="modal" data-bs-target="#exampleModal" 
                (click)="editClick(dataItem)" 
                data-backdrop="static" 
                data-keyboard="false" >
                Update</button>
                <button type="button" class="btn btn-light mr-1" (click)="deleteClick(dataItem)">
                Delete</button>
            </td>
        </tr>
    </tbody>

和Angularcomponent.ts

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/shared.service';
@Component({
  selector: 'app-show-game',
  templateUrl: './show-game.component.html',
  styleUrls: ['./show-game.component.css']
})
export class ShowGameComponent implements OnInit {

  constructor(private service:SharedService) { }

  GameList: any = [];
  ModalTitle:string ="";
  ActiveAddEditGameComp:boolean=false;
  game:any;


  ngOnInit(): void {
    this.refreshGameList();
  }

  addClick(){
    this.game={
      id:0,
      name:"",
      description:"",
      avaiable:0,
      fee:0
    }
    this.ModalTitle="Add Game";
    this.ActiveAddEditGameComp = true;
  }

  editClick(item: any){
    this.game=item;
    this.ModalTitle="Edit Game";
    this.ActiveAddEditGameComp=true;
  }

  closeClick(){
    this.ActiveAddEditGameComp=false;
    this.refreshGameList();
  }

  deleteClick(item:any){

     this.service.deleteGame(item).subscribe(data => {
       alert(data.toString());
       this.refreshGameList();
     })
  }

  refreshGameList(){
    this.service.getGameList().subscribe(data => {
      this.GameList=data;
    });
  }
}

有什么想法吗？

Answer 1

不确定这是否解决了所有问题，但我看到控制器需要一个 ID，而您正在传递完整的对象。试试这个：

deleteClick(item:any){
 this.service.deleteGame(item.id).subscribe(data => {
   alert(data.toString());
   this.refreshGameList();
 })
}

Answer 2

您的 DELETE 端点服务器端需要 .../games/{id} 的 URL 并且您要给它 .../games 有效负载。

您还没有为您的 PUT 操作发布代码，但这可能是同一个问题。

您的问题出在 UI 代码中：

  deleteGame(val:any){
    return this.http.delete(this.APIUrl+'/Games/' ,val);
  }

它应该更像这样，您可以在其中适当地形成 URL 并且不提供有效负载：

  deleteGame(val:any){
    return this.http.delete(`${this.APIUrl}/Games/${val.id}`);
  }

编辑：

请注意，您的 PUT 端点可能需要 URL 中的 ID 和有效负载作为请求的主体：

  updateGame(val:any){
    return this.http.put(`${this.APIUrl}/Games/${val.id}`, val);
  }

重要的是您的 URL 和前端的负载与另一端的预期相匹配。

Angular + asp.net：删除和更新请求不起作用

Angular + asp.net: Delete and update requests doesn't work

c#

frontend

backend

angular