Удалить строку из таблицы ng- bootstrap

Question

Я успешно реализовал пример таблицы ng- bootstrap.
Удаление объекта из DOM и базы данных работает, но я не могу найти способ удалить строку из представления.
Для того, чтобы увидеть требуется перезагрузка страницы изменений.

Кроме того, у меня возникают аналогичные трудности с добавлением элементов в представление.

Поскольку в ng- bootstrap табличная реализация data (или чего-либо еще) наблюдаема data$,
Я не могу позвонить data$ в течение l oop, как в приведенном ниже подходе или аналогичных.

<!-- html -->    
<tr *ngFor="let d of data | async" [attr.id]="d.id">

// ts
deleteRow(id){
    for(let i = 0; i < this.data.length; ++i){
        if (this.data[i].id === id) {
            this.data.splice(i,1);
        }
    }
}

Может кто-нибудь указать мне правильное направление, пожалуйста.

репо в исходном коде моего приложения:
https://gitlab.com/srdjan-milic/angular-todo-list/-/tree/master/todo-list-frontend-1

ng- bootstrap пример таблицы:
https://ng-bootstrap.github.io/# / компоненты / таблица / примеры # завершено

У меня есть этот кусок кода:

deleteTodo(id: string) {
    this.todoService.deleteTodo(id)
        .subscribe(data => {
            console.log(data);
        },
            error => console.log(error)
        );
    for (let i = 0; i < this.tableService.todoArray.length; i++) {
        if (this.tableService.todoArray[i]._id === id) {
            this.tableService.todoArray.splice(i, 1);
        }
    }
    this.todoLength--;
    this.modalService.dismissAll();
    console.log('ArrayLength ' + this.tableService.todoArray.length);
}

Эта функция удаляет элемент todo из базы данных, а для l oop удаляет этот объект todo из массив.

Answer 1

Angular Обнаружение изменений не работает для splice, поскольку оно не изменяет ссылку на переменную массива. Вам нужно либо обновить ссылку на переменную (пример ниже), либо обнаружение изменения триггера вручную .

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