javascript - 从 ng-bootstrap 表中删除行

Question

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

我打不通 data$来自 for像波纹管方法或类似方法一样循环，因为 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);
}

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



repo 到我的应用程序源代码:
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);
}