Обновить страницу после удаления в Angular

Question

Мне нужно удалить пользователя из моей таблицы материалов, но страница не обновляется.В моей консоли все нормально, но в таблице ничего не происходит.

Если я выбираю пользователя, как я делаю, в моем NgonInit, он перезагружает всю таблицу, а не данные после удаления.

ts file

  deleteUser(user) {
    this.dataSource.data.splice(this.dataSource.data.indexOf(user), 1);
    console.log(user); // I have the good user
    console.log(this.dataSource.data); // my table is updated
  }

когда я вызываю свою функцию для вызова моих пользователей

this.http.get("./assets/data/user.json")
      .subscribe(
        (response) => {
          this.dataSource.data = response;
          console.log(this.dataSource.data) // I have the inital table of users
        },

Answer 1

mat-table не будет обнаруживать изменения в вашем dataSource, если он был изменен в результате мутации, он будет перерисовываться только при изменении ссылки на массив.Попробуйте обновить data в dataSource неизменным образом после использования функции splice, как показано ниже.

this.dataSource.data.splice(this.dataSource.data.indexOf(user), 1);
this.dataSource.data = [...this.dataSource.data];

Или, если у вас есть уникальное значение, скажем id в user, выможно использовать filter, поскольку он создает новый массив.

deleteUser (id) {
    this.dataSource.data = this.dataSource.data.filter(user => user.position !== id);
}

, где id - это id из user, который вы хотите удалить.

Answer 2

Предлагаю создать переменную для хранения данных:

const data;
this.http.get("./assets/data/user.json")
    .subscribe(
        (response) => {
            this.data = response;
            this.dataSource.data = data;
            console.log(this.dataSource.data) // I have the inital table of users
        },

А при удалении:

deleteUser(user) {
   this.data.splice(this.data.indexOf(user), 1);
   this.dataSource.next(this.data);
   console.log(user); // I have the good user
   console.log(this.dataSource.data); // my table is updated
}

Строка this.dataSource.next(this.data); уведомляет, что данные изменяются и изменения отражаютсязатем.

Не проверено, но попробуйте, если это работает:

deleteUser(user) {
  this.dataSource.data.splice(this.dataSource.data.indexOf(user), 1);
  this.dataSource.next(this.dataSource.data);
}