Angular项目中编辑Igx Grid单元格时更新SQL数据库的实现方法问询

完全可以实现Igx Grid单元格编辑后同步更新数据库，以下是适配Angular 12 + C#后端技术栈的完整实现方案：

1.1 调整Grid HTML模板 #

给igx-grid组件绑定cellEditDone事件，该事件会在单元格编辑提交后触发，修改后的代码如下：

<igx-grid width="80%" [data]="posts" height="600px" style="margin: auto" [allowFiltering]="true"
  (cellEditDone)="onCellEditDone($event)">
  <igx-column field="id" [dataType]="number" header="ID" [sortable]="true" [movable]="true"></igx-column>
  <igx-column field="name" [dataType]="'string'" header="Name" [sortable]="true" [movable]="true"  [editable]="true"></igx-column>
  <igx-column field="familyname" [dataType]="'string'" header="Family Name" [sortable]="true" [movable]="true" [editable]="true"></igx-column>
</igx-grid>

1.2 组件逻辑实现 #

首先确保你已经在AppModule或者当前模块导入了HttpClientModule，然后在对应组件的ts文件中编写编辑事件处理逻辑：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IGridCellEditEventArgs } from 'igniteui-angular';

@Component({
  // 你的原有组件配置
})
export class YourGridComponent {
  posts: any[] = [];
  // 替换为实际的后端接口地址
  private apiUrl = 'https://你的后端服务地址/api/Post';

  constructor(private http: HttpClient) {}

  onCellEditDone(event: IGridCellEditEventArgs) {
    // 构造修改后的行数据
    const updatedRow = { ...event.rowData };
    updatedRow[event.column.field] = event.newValue;

    // 调用后端更新接口
    this.http.put(`${this.apiUrl}/${updatedRow.id}`, updatedRow).subscribe({
      next: () => {
        // 更新成功可自定义提示逻辑
      },
      error: (err) => {
        // 更新失败回滚单元格值
        event.cell.value = event.oldValue;
        console.error('数据更新失败：', err);
      }
    });
  }
}

这里以ASP.NET Core Web API为例，适配Visual Studio 2019开发环境：

2.1 定义数据传输对象 #

public class PostUpdateDto
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Familyname { get; set; }
}

2.2 编写更新接口控制器 #

[ApiController]
[Route("api/[controller]")]
public class PostController : ControllerBase
{
    // 替换为你自己的EF Core数据库上下文
    private readonly YourDbContext _dbContext;

    public PostController(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> UpdatePost(int id, [FromBody] PostUpdateDto updateDto)
    {
        if (id != updateDto.Id)
        {
            return BadRequest();
        }

        var post = await _dbContext.Posts.FindAsync(id);
        if (post == null)
        {
            return NotFound();
        }

        // 赋值更新字段
        post.Name = updateDto.Name;
        post.Familyname = updateDto.Familyname;

        try
        {
            await _dbContext.SaveChangesAsync();
        }
        catch (Exception ex)
        {
            return StatusCode(500, ex.Message);
        }

        return NoContent();
    }
}

• 如果前后端部署端口不同，需要在后端配置CORS规则允许前端域名访问，避免跨域报错
• 可以给编辑操作加加载状态，避免用户快速重复提交请求
• 生产环境请添加参数校验、权限验证逻辑，防止非法修改数据
• 如果需要整行编辑完成后再提交，可以将cellEditDone事件替换为rowEditDone事件，减少接口请求次数

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