Angular 2 : Data table doesn't refresh after deleting an item

Question

I am trying to delete an item from a data table. The item is deleted from database when i click on delete button but the table doesn't refresh the items.

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>
  <!--bouttons d'action-->
  <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>

My question is how can I refresh the table after deleting an item.

Answer 1

It turns out that when i delete an item, the backend does not generate a JSON response. so i had a HttpErrorResponse.

ERROR HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://link/api/news/2", ok: false, …}

Then i have added responseType: 'text' to httpOptions in my news.services.ts:

import {HttpHeaders, HttpClient, HttpErrorResponse} from "@angular/common/http";
import {Observable} from "rxjs";
import 'rxjs/add/operator/catch';
import {News} from "../entities/news";
import {Injectable, Injector} from "@angular/core";
import {Router} from "@angular/router";
import {Country} from "../entities/Country";

@Injectable()
export class NewsService {

  private router: Router;

   header: HttpHeaders;

  httpOptions = {
    headers : new HttpHeaders({ 'Content-Type': 'application/json'}),
    responseType: 'text'
  };
  createAuthorizationHeader(headers: Headers) {
    headers.append('Authorization', this.token);
    headers.append('Content-Type', "application/json");
  }
  constructor(private http: HttpClient,private injector:Injector) {

    this.router = this.injector.get(Router);
    this.header = new HttpHeaders();
    this.header.set('Authorization', this.token);
    this.header.set('Content-Type', 'application/json');

  }

  public GetById(id: number) : Observable<any|News>{
       /*****/
  }

  public updateNews(n: News) {
    return this.http.put(this.url, JSON.stringify(n),this.httpOptions);

  }

  public deleteNews(n: News) {
    return this.http.delete(this.url + '/' + n.id, this.httpOptions);
  }

}

and it works like charm!

Thanks for your help guys...