I need assistance with updating a data table after deleting an item. The database is updated correctly when I delete an item, but the table does not automatically refresh to reflect the changes.
managenews.component.ts
import { Component, OnInit } from '@angular/core';
import {NewsService} from "../../../services/news.services";
import {News} from "../../../entities/news";
import {Subscription, Observable} from "rxjs";
import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'app-managenews',
templateUrl: './managenews.component.html',
styleUrls: ['./managenews.component.css'],
providers: [NewsService]
})
export class ManagenewsComponent implements OnInit {
news: News[]= new Array();
newsSub:Subscription;
constructor(private newsService: NewsService,private route: ActivatedRoute) { }
ngOnInit() {
this.getNews();
}
getNews(){
this.newsSub=this.newsService.GetAllNews().subscribe(news =>this.news = news);
}
deleteNews (id:number){
this.newsService.GetById(id).subscribe((e)=>{
let n=<News> e;
this.newsSub= this.newsService.deleteNews(n).subscribe(e=>{
this.getNews();
});
});
}
ngOnDestroy(){
this.newsSub.unsubscribe();
}
}
managenews.component.html
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%>
<tr>
<td>Title</td>
<td>Date of creation</td>
<td>Author</td>
<td>Location</td>
<td>Edit</td>
<td>Delete</td>
<td>Upload Media</td>
</tr>
<tr *ngFor="let n of news">
<td>{{n.title}}</td>
<td>{{n.dateOfCreation}}</td>
<td>{{n.author}}</td>
<td>{{n.location}}</td>
<!--action buttons-->
<td class="aligne"><a [routerLink]="['editnews', n.id]"><i class="fa fa-pencil-square" aria-hidden="true"></i></a></td>
<td class="aligne"><a [routerLink]="['./']"(click)="deleteNews(n.id)" ><i class="fa fa-trash" aria-hidden="true"></i></a></td>
<td class="aligne"><i class="fa fa-upload" aria-hidden="true"></i></td>
</tr>
I'm looking for help on how to refresh the table after deleting an item.