从 ng-bootstrap table 中删除行

Question

我已经成功实现了 ng-bootstrap table 完整示例。
从 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);
}

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

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

Answer 1

Angular 更改检测对 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();
}
...

从 ng-bootstrap table 中删除行

Delete row from ng-bootstrap table

javascript

angular

typescript

ng-bootstrap