从 ng-bootstrap 表中删除行

Question

我已经成功实现了 ng-bootstrap 表完整示例。
从 DOM 和数据库中删除对象正在工作，但我找不到从视图中删除行的方法。 为了查看更改页面，需要重新加载。 请注意，删除功能是并且应该从 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

角度变化检测不适用于splice因为它不会更改对数组变量的引用。 您需要更新变量引用（下面的示例）或手动触发更改检测。

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

Answer 2

这是有效的代码：

todo-list.component.ts

export class TodoListComponent implements OnInit {
  todos$: Observable<Todo[]>;
  total$: Observable<number>;

  @ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  constructor(private todoService: TodoService, private router: Router, private modalService: NgbModal,
              public tableService: TableService, public updateTodoComponent: UpdateTodoComponent,
              public myBootstrapModalCoomponent: MyBootstrapModalComponent, private ref: ChangeDetectorRef) {
    this.todos$ = this.tableService.todos$;
    this.total$ = this.tableService.total$;
  }

...

deleteTodo(id: string) {
  this.todoService.deleteTodo(id)
    .subscribe(todo => {
      console.log(todo); // print message from server
    },
      error => console.log(error)
    );
  this.todos$.subscribe(todos => {
    for (let i = 0; i < todos.length; i++) {
      if (todos[i]._id === id) {
        todos.splice(i, 1);
      }
    }
  });
  this.tableService.todoArray.length--;
  this.modalService.dismissAll();
}

table.service.ts

...
private _todos$ = new BehaviorSubject<Todo[]>([]);

get todos$() {
  return this._todos$.asObservable();
}
...