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

在删除/创建用户后，通过再次调用组件中的getAllUsers（）方法来刷新数据。由于ngOnInit（）在创建组件后仅被调用一次。

Answer 2

在成功删除之后，如果您不想转到服务器来获取新的用户列表，则可以过滤用户：

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

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

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

我建议您在create方法中返回添加到DB的新用户，并将该对象放在客户端的数组中，这样您就可以在一次调用中获得服务器中的完整对象。

尽管我删除了数据，但除非刷新页面，否则看不到它已被删除

2 个答案: