Question

我正在尝试使用角度引导和弹簧引导进行CRUD应用程序。尝试删除项目时，无法刷新表。这是我的代码：

Contrat.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>

Contrat.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

尽管数据已更改，但表将保存先前的数据。因此，要重新渲染新数据，诀窍是使用带布尔值的* ngIF指令。发布删除确认后，只需将布尔值切换为false并在获取时将布尔值设为true。

  <div *ngIf="isAvailable">
  <table class="table table-hover table-bordered">

这将起作用。

Answer 2

没有必要重新加载数据。而是从您的对位（我认为应该是合同？）数组中删除已删除的项目，如下所示：

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);
}

Answer 3

您没有删除数据。好吧，您正在过滤和填充相同的数据。所以您只需要更新contrats数组即可。无需再次调用获取数据。

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

Answer 4

嗯，应该有帮助，

fetchData() {
  this.contrats = null; //or create new contrats object
  this.contratService.getContrats().subscribe(data =>{
  this.contrats = data;
});

并将其添加到模板端，

<table class="table" *ngIf="contrats">
.
.
.

使用这种方法，您可以确定从上下文中删除条目后，新数据是最新的。

Answer 5

谢谢你们，我通过放置this.fetchData（）;解决了超出subscribe（）

删除角度项目后无法刷新表格

5 个答案: