Angular9中Angular Material表格多选删除返回值异常求助

嘿，我看你在做.NET + Angular的CRUD项目，用Angular Material表格做批量删除的时候遇到了返回"0"的问题，这大概率是数据没正确传到后端或者后端没正确接收/处理导致的，咱们一步步来排查解决：

1. 先检查后端C#控制器的接收逻辑 #

返回"0"最常见的原因是后端根本没拿到你传的数组，首先确保你的WebAPI方法正确处理请求体里的数组：

• 必须给参数加上[FromBody]特性，因为Angular的POST请求是把数据放在请求体里的，示例代码：

  [HttpPost("DeleteRecord")]
  public IActionResult DeleteRecord([FromBody] List<detail> records)
  {
      // 先判断是否接收到数据
      if (records == null || records.Count == 0)
      {
          return Ok("0"); // 这里就是返回0的直接原因！
      }
  
      // 执行你的删除逻辑，比如用EF Core删除
      int deletedCount = 0;
      try
      {
          _dbContext.details.RemoveRange(records);
          deletedCount = _dbContext.SaveChanges();
      }
      catch (Exception ex)
      {
          // 可以记录日志，返回错误信息
          return BadRequest("删除失败：" + ex.Message);
      }
  
      return Ok(deletedCount.ToString());
  }
  

• 还要确保后端的detail实体类和前端的结构完全匹配，属性名和类型都要一致：

  public class detail
  {
      public int Id { get; set; }
      public string Name { get; set; }
  }
  

2. 检查前端Angular的问题 #

（1）确认SelectionModel是否正确初始化 #

在你的组件里，必须初始化selection对象，否则选中的行不会被收集：

import { SelectionModel } from '@angular/cdk/collections';
import { detail } from './your-path'; // 导入你的模型类

// 组件类里添加
selection = new SelectionModel<detail>(true, []); // true表示允许多选

（2）修复表格行的点击事件 #

你的HTML里行点击事件写错位了！现在的写法是无效的：

<!-- 错误写法 -->
<tr mat-row *matRowDef="let row; columns: displayedColumns;">(click)="selection.toggle(row)"></tr>

要把点击事件放到<tr>标签内部，这样点击行才能触发选中：

<!-- 正确写法 -->
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></tr>

这个错误会导致你点击行时，根本没把数据添加到selection.selected里，传去后端的是空数组，自然返回0。

（3）优化HTTP请求的可靠性 #

虽然Angular的HttpClient默认会设置正确的请求头，但可以显式指定Content-Type，确保数据以JSON格式发送：

import { HttpHeaders } from '@angular/common/http';

// 在service里修改deleteData方法
deleteData(num: detail[]): Observable<string> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<string>(`${this.rootURL}/WebAPI/DeleteRecord`, num, { headers });
}

另外，在删除前先判断是否选中了数据，避免空请求：

DeleteData() {
    const numSelected = this.selection.selected;
    if (numSelected.length === 0) {
        alert('请先选择要删除的记录哦');
        return;
    }

    this.service.deleteData(numSelected).subscribe({
        next: (result) => {
            alert(`成功删除了 ${result} 条记录`);
            this.refreshList();
        },
        error: (err) => {
            console.error('删除出错了:', err);
            alert('删除失败，请查看控制台日志');
        }
    });
}

3. 调试验证 #

• 前端：打开浏览器开发者工具的Network标签，触发删除请求，查看Payload里是否有选中的数组数据，如果是空的，说明前端选中逻辑有问题。
• 后端：在控制器方法里加断点，查看records参数是否有值，如果为空，说明数据没传对；如果有值，那就是删除逻辑的问题（比如数据库里找不到对应ID的记录）。

按照上面的步骤排查，应该就能解决返回"0"的问题啦！

内容的提问来源于stack exchange，提问作者Dokey