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

Posted 2023-03-13

【中文标题】API调用后Angular应用程序不更新列表

【英文标题】：Angular application not updating list after API call

【发布时间】：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); );

【参考方案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 好的，所以你的服务不是问题，给我看你的完整组件代码