编辑和删除 angular 中的 table 数据

Question

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

下面是项目的stackblitz：

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

Answer 1

假设您将要删除的数据存储在数据库中，您将需要创建反映编辑和删除的按钮，在 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 视频，因为那里有大量的信息和详细的解释

Answer 2

我不喜欢使用过滤器删除任何元素，直到这是唯一的方法，因为它具有 O(n) 的复杂性（意味着它将遍历所有元素以找到要删除的元素）我更喜欢删除任何按索引的元素具有复杂性 O(1).

delete(index): void{
    // delete directly via index by javascript splice() method
    });

Answer 3

如果您想要删除多个项目，您必须向用户添加一个属性作为布尔类型 selected，然后在复选框的帮助下输入并删除值。

<tbody >
     <tr *ngFor="let user of formData">
      <td *ngIf="editMode"> <input type="checkbox" [(ngModel)]="user.selected"/></td>
      <td>{{user.Name}}</td>
      <td>{{user.email}}</td>
      <td>{{user.phoneNumber}}</td>
      <td>{{user.password}}</td>
      <td>{{user.gender}}</td>
     </tr>
</tbody>

然后在删除按钮上删除所有选定的项目

delete(){
  this.formData =  this.formData.filter( value =>{
    return value.selected === false;
    })
  }

并在保存按钮上将更新后的数据发送到后端。我更新了 the Stackblitz.

编辑和删除 angular 中的 table 数据

Edit and Delete table data in angular

forms

angular

angular-forms