Question

我无法从模板中删除行。我能够从数据库中删除记录，但不能从模板中删除。

我已经尝试了使用splice方法的功能，但是我一直收到错误消息。

this.articles.splice不是函数

delete.component.ts

deleteArticle(id: number) {
  return this.httpClient.delete(`${this.AUTH_SERVER}/api/v1/delete-article/${id}`).subscribe((res: any[]) => {
    console.log(res);
    this.listArticles();
    this.snackBar.open('Article deleted!', '', {
      duration: 2000
    });
  });
}

delete.component.html

<button mat-stroked-button color="warn" (click)="this.articleService.deleteArticle(article.id)">
  <i class="material-icons">
    delete_forever
   </i>
   Delete
</button>

Answer 1

您可以删除/过滤数据样本：

export class AppComponent {
  constructor(private http: HttpClient) {}
  data: any[] = [];
  onFetch() {
    this.http
      .get("https://dummy.restapiexample.com/api/v1/employees")
      .subscribe((res: any) => {
        this.data = res.data;
      });
  }
  onDelete(id: any) {
    this.http
      .delete("https://dummy.restapiexample.com/api/v1/delete/" + id)
      .subscribe((res: any) => {
        this.data = this.data.filter(x => x.id !== id);
      });
  }
}

沙箱： https://codesandbox.io/s/thirsty-sun-nk69g

动态从模板删除行

1 个答案: