Question

我需要从材料表中删除用户，但页面不会刷新。在我的控制台中可以，但是表中什么也没有。

如果我像在NgonInit中那样获取用户，它将重新加载整个表，而不是删除后的数据。

ts文件

  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的{{1}}。

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

在Angular中删除后刷新页面

2 个答案: