angular - 以 Angular 删除项目后无法刷新表

Question

我正在尝试使用 angular 和 spring boot 做一个 CRUD 应用程序。尝试删除项目时，无法刷新表格。这是我的代码:

契约(Contract).component.ts:

<table class="table ">
    <thead>
        <th>ID</th>
        <th> TYPE</th>
        <th>MISSION</th>
        <th> <img src="assets/plus.png"> </th>
    </thead>
    <tbody>
        <tr *ngFor="let contrat of contrats ">
            <td>{{contrat.id}}</td>
            <td>{{contrat.type}}</td>
            <td>{{contrat.name_mission}}</td>
            <td><button class="btn btn-danger" (click)="deleteContrat(contrat)">Delete</button>
                <button class="btn btn-primary">Edit</button></td>
        </tr>
    </tbody>
</table>

契约(Contract).component.ts:

deleteContrat(contrat) {
    this.contratService.deleteContrat(contrat.id).subscribe((data) => {
        this.contrats = this.contrats.filter(u => u !== contrat);
        this.fetchData();
    }, (error) => {});
}

fetchData() {
    this.contratService.getContrats().subscribe(data => {
        this.contrats = data;
    });
}

删除服务有效，但无法自动刷新表。

Answer 1

不需要重新加载数据。而是从您的契约(Contract)(我假设它应该是契约(Contract)？)数组中删除已删除的项目，如下所示:

this.contratService.deleteContrat(contrat.id).subscribe( (data)=>{
  const deletedContrat = this.contrats.find(x => x.id === contrat.id);
  this.contrats.splice(this.contrats.indexOf(deletedContrat), 1);
}