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