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

【问题标题】：Angular application not updating list after API callAPI调用后Angular应用程序不更新列表
【发布时间】：2020-03-28 14:16:20
【问题描述】：

当我删除时，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);
    });
}

【问题讨论】：

你能提供一个 stackblitz 示例或更多规范吗？
Angular 不知道何时应该或不应该刷新或修改来自 api 的数据。你需要自己做。
是的，我知道这一点，但如何？
如果你能显示加载文章的代码和数据的例子，那将有助于回答
ngOnInit() { this.articleService.readArticles().subscribe((articles: Article[])=>{ this.articles = articles; console.log(this.articles); }); }

标签： angular typescript

【解决方案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);
    }
  });
}

【讨论】：

this.articles.findIndex 不是函数
@tdsjohn 你能提供给我你的应用程序的 stackblitz.com 演示吗？或者只是发布您的组件和服务代码
你现在让我很困惑，这是我的服务文件：@Injectable({ providedIn: 'root' }) export class ArticlesService { PHP_API_SERVER = "http://127.0.0.1:8000"; constructor(private httpClient: HttpClient) {} readArticles(): Observable<Article[]>{ return this.httpClient.get<Article[]>(${this.PHP_API_SERVER}/api/articles); } deleteArticle(id: number){ return this.httpClient.delete<Article>(${this.PHP_API_SERVER}/api/article/${id }); } }
@tdsjohn 好的，所以你的服务不是问题，给我看你的完整组件代码