javascript - 从 ng-bootstrap 表中删除行

Question

我已经成功实现了 ng-bootstrap 表完整示例。
从 DOM 和数据库中删除对象正在工作，但我找不到从 View 中删除行的方法。为了查看更改，需要重新加载页面。请注意，删除功能是并且应该从 ng-bootstrap 模式对话框确认按钮触发。

我无法像下面的方法或类似方法那样从 for 循环中调用 data$ ，因为 todo(或任何其他方法) ) 是可观察的 todos$,

<!-- html -->
<tr *ngFor="let todo of tableService.todos$ | async;">

// typescript
deleteRow(id){
  for(let i = 0; i < this.data.length; ++i){
    if (this.data[i].id === id) {
        this.data.splice(i,1);
    }
  }
}

请有人给我指出正确的方向。

我有这段代码:

deleteTodo(id: string) {
  this.todoService.deleteTodo(id)
    .subscribe(data => {
        console.log(data); // print message from server
    },
        error => console.log(error)
    );
  this.tableService.todoArray = this.tableService.todoArray.filter(elem => elem._id !== id);
  this.todoLength--;
  this.modalService.dismissAll();
  console.log('filtered array: ' + this.tableService.todoArray.length);
  console.log('id: ' + id);
}

此函数从数据库中删除待办事项，过滤器方法从数组中删除待办事项。请查看下面的屏幕截图。

存储到我的应用程序源代码:
https://github.com/SrdjanMilic/NG-Bootstrap-Todo-list

Answer 1

Angular 变化检测不适用于splice，因为它不会更改对数组变量的引用。您需要更新变量引用(下面的示例)或 trigger change detection manually .

deleteRow(id) {
   this.data = this.data.filter(elem => elem.id !== id);
}