Delete row from ng-bootstrap table

Question

I have successfully implemented ng-bootstrap table complete example.
Object deletion from DOM and database are working, but I can't find a way to delete row from view. In order to see the changes page reload is required. Please notice, that delete function is and should be triggered, from ng-bootstrap modal dialog confirm button.

I can't call data$ from the for loop like in the bellow approach or similar ones, because todo (or what ever) is observable 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);
    }
  }
}

Could someone point me to the right direction, please.

I have this chunk of code:

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);
}

This function deletes todo item from database and filter method deletes todo from an array. Please look at the screenshot bellow.

repo to my app source code:
https://github.com/SrdjanMilic/NG-Bootstrap-Todo-list

Answer 1

Angular change detection doesn't work for splice because it does not change the reference to the array variable. You need either to update the variable reference (example below) or trigger change detection manually .

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

Answer 2

This is the code that works:

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();
}
...