时间戳

首页 > 解决方案 > 以角度编辑和删除表格数据

angular - 以角度编辑和删除表格数据

问题描述

我正在学习 Angular 中的表单。我制作了一个表格，并在提交时表格数据显示在下表中。我想为此添加删除和编辑功能。请指导我。

以下是该项目的stackblitz：

https://stackblitz.com/edit/angular-forms-tdf

标签： angularformsangular-forms

解决方案

假设您将要删除的数据存储在数据库中，您将需要创建反映编辑和删除的按钮，例如为 html 文件中的每个创建方法

<div class="col-md-2"><button class="btn btn-danger" (click)="delete(std)">DELETE</button></div>

并在您的 ts 文件中插入代码，例如

//you make a call to your APi which references your backend
delete(person: Persons): void{
    this.apiService.deletePerson(person.Id)//method name in your services.ts file
    .subscribe(data =>{
      this.person = this.person.filter(u => u !==person);
    });

如上所述，您还需要在服务文件中调用（请注意此示例使用 php 和 mysql），例如：

deletePerson(Id: number):Observable<ApiResponse>  {
    return this.http.delete<ApiResponse>(`http://localhost/angular9crud/delete.php?id=${id}`);
  }

如果您使用的是后端，例如 php，那么我建议您观看一些 youtube 视频，因为有大量的信息和详细的解释可用

推荐阅读