angular - 从角度材料表中动态删除行

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>

标签： angularangular-materialmaterial-design

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