node.js - 虽然我删除了数据，但除非刷新页面，否则看不到它被删除

Question

当我点击它时，它会添加数据，但是当我刷新页面时，我可以看到它已添加。像这样删除也会出现同样的问题。我删除了，但是刷新页面只能看到被删除了。我该如何解决这种情况？

app.component.ts

  constructor(private srv: UserServiceService) {}
  users: any = [];
  checkForm: any;
  name: FormControl;
  surname: FormControl;
  age: FormControl;

  async ngOnInit() {
    (this.name = new FormControl(
      "",
      Validators.compose([Validators.required])
    )),
      (this.surname = new FormControl(
        "",
        Validators.compose([Validators.required])
      )),
      (this.age = new FormControl(
        null,
        Validators.compose([Validators.required])
      ));
    this.getAllUsers();
  }

  async getAllUsers() {
    await this.srv.allUsers().subscribe(val => {
      this.users = val;
    });
  }

  addUserFunction() {
    this.srv
      .addUserService(this.name, this.surname, this.age)
      .subscribe(val => {
        console.log("val: ", val);
      });
    this.name.reset();
    this.surname.reset();
    this.age.reset();
  }

  async deleteUser(id) {
    await this.srv.deleteUserService(id).subscribe(user => {
      console.log(user); 
    });
  }

user-service.service.ts

export class UserServiceService {
  constructor(private http: HttpClient) {}

  allUsers() {
    return this.http.get("http://localhost:3000/get_users");
  }

  addUserService(name, surname, age) {
    return this.http.post("http://localhost:3000/add_user", {
      name: name,
      surname: surname,
      age: age
    });
  }

  deleteUserService(id) {
    return this.http.delete("http://localhost:3000/delete_user/" + id);
  }
}

Answer 1

成功删除后，如果您不想访问服务器来获取新的用户列表，则可以过滤您的用户，如下所示:

this.users =  this.users.filter(function(index) {
    return this.users.id== index;
});

因此您可以将其放入订阅中的删除方法中。

您也可以在创建时使用相同的方法，只需将新用户添加到列表中，或从服务器获取新用户。

我建议在您的创建方法中返回添加到数据库的新用户，并将该对象放入客户端的数组中，以便您可以在一次调用中从服务器获得完整的对象。