Question

我正在尝试从数据表中删除项目。当我点击删除按钮但该表没有刷新项目时，该项目将从数据库中删除。

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>

我的问题是如何在删除项目后刷新表格。

Answer 1

事实证明，当我删除项目时，后端不会生成JSON响应。所以我有一个HttpErrorResponse。

ERROR HttpErrorResponse {headers：HttpHeaders，status：200，statusText：“OK”，url：“http://link/api/news/2”，ok：false，...}

然后我在我的 news.services.ts 中为httpOptions添加了responseType：'text'：

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

}

它就像魅力一样！

感谢您的帮助......

Angular 2：删除项目后数据表不刷新

1 个答案: