Cannot refresh table after deleting item in angular

Question

I'm trying to do a CRUD application using angular and spring boot. When trying to delete an item, the table can't be refreshed. Here is my code:

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

The delete service works but the table can't be automatically refreshed.

Try to set your this.contrats object to null.

rcanpahali
– rcanpahali

2019-02-28 08:49:05 +00:00
Commented Feb 28, 2019 at 8:49 — rcanpahali
– rcanpahali, Commented Feb 28, 2019 at 8:49
where exactly i should set it ?

Sihem Hcine
– Sihem Hcine

2019-02-28 08:53:40 +00:00
Commented Feb 28, 2019 at 8:53 — Sihem Hcine
– Sihem Hcine, Commented Feb 28, 2019 at 8:53
Added as answer.

rcanpahali
– rcanpahali

2019-02-28 08:56:21 +00:00
Commented Feb 28, 2019 at 8:56 — rcanpahali
– rcanpahali, Commented Feb 28, 2019 at 8:56

De Wet van As · Accepted Answer · 2019-02-28 08:55:29Z

4

It is not necessary to reload the data. Instead remove the deleted item from your contrat (I assume it should be contract?) array as follows:

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

edited Feb 28, 2019 at 8:55

answered Feb 28, 2019 at 8:46

De Wet van As

99810 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sihem Hcine Over a year ago

it gets error in contratIndex : Argument of type 'Contrat' is not assignable to parameter of type 'number'.ts(2345)

Satheesh Srinivasan · Accepted Answer · 2019-02-28 08:58:10Z

2

Though the data is changed the table will hold the previous data. So to re-render the new data, the trick is to use *ngIF directive with a boolean. Post delete confirmation, just toggle the boolean value to false and on fetch just make the boolean to true.

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

This will work.

answered Feb 28, 2019 at 8:58

Satheesh Srinivasan

1771 silver badge12 bronze badges

Comments

rcanpahali · Accepted Answer · 2019-02-28 08:56:12Z

1

Well, it should help,

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

And add this to your template side,

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

With this approach you are sure that after deleting an entry from context, the new data is current.

answered Feb 28, 2019 at 8:56

rcanpahali

2,6432 gold badges25 silver badges40 bronze badges

2 Comments

Sihem Hcine Over a year ago

i get the same result, nothing changed :(

rcanpahali Over a year ago

If you get same result, that means your getContrats() service is returnig you same context. OR you are not getting data from service, you are getting data from CACHE. Try to poke your browser cache settings.

rajat gangwani · Accepted Answer · 2019-02-28 09:01:01Z

1

You are not deleting the data. Well you are filtering and populating the same data. so you just have to update the contrats array and that's it. There is no need to call fetch data again.

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

edited Feb 28, 2019 at 9:01

answered Feb 28, 2019 at 8:48

rajat gangwani

345 bronze badges

Comments

Sihem Hcine · Accepted Answer · 2019-02-28 11:35:32Z

1

thank you guys, I solved it by putting this.fetchData(); out of subscribe()

answered Feb 28, 2019 at 11:35

Sihem Hcine

1,1296 gold badges25 silver badges41 bronze badges

1 Comment

rcanpahali Over a year ago

Your this.fetchData() need to be inside of your subscribe block, what if delete event unsuccessfully at server-side? You remove element at client-side but it exist at server-side...

Collectives™ on Stack Overflow

Cannot refresh table after deleting item in angular

5 Answers 5

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related