Angular 应用程序在 API 调用后不更新列表

Question

当我删除时，Angular 应用程序不会实时更新

deleteArticle(id) {
    this.articleService.deleteArticle(id).subscribe((article: Article)=>{
        console.log("Article deleted, ", article);
    });
}

文章被删除了，但我需要刷新浏览器才能看到结果？

编辑：加载代码：

ngOnInit() {
    this.articleService.readArticles().subscribe((articles: Article[])=>{ 
        this.articles = articles;
        console.log(this.articles);
    });
}

Answer 1

您没有更新文章列表。

改变这个：

deleteArticle(id){
  this.articleService.deleteArticle(id).subscribe((article: Article)=>{
    console.log("Article deleted, ", article);
  });
}

对此：

deleteArticle(id){
  this.articleService.deleteArticle(id).subscribe((_)=>{
    //find the deleted article index in the list
    const idx: number = this.articles.findIndex(
      (article: Article) => { article.id === id }
    );

    //remove the deleted article from the list
    if(idx !== -1) {
      this.articles.splice(idx, 1);
    }
  });
}