我正在尝试使用 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;
});
}
删除服务有效,但无法自动刷新表。
最佳答案
不需要重新加载数据。而是从您的契约(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);
}
https://stackoverflow.com/questions/54921489/
相关文章:
reactjs - React Hooks,如何实现useHideOnScroll hook?
node.js - 为什么使用archiver.file模块压缩文件时出现 "queue close
python-3.x - 如何从 faust 应用程序向 Websocket 发送数据
python - 如何更改 django admin css 样式和字体?
kotlin - "lambda@"在 Kotlin 中是什么意思
java - 用于更新查询的 JPA @Query 注释(oracle sql 开发人员)——org
office365 - 是否有 API 可以以编程方式制作 MS Office 365 Powerp