Хотя я удаляю данные, я не вижу, как они удаляются, если я не обновлю sh страницу

Question

Когда я нажимаю на нее, она добавляет данные, но когда я обновляю sh страницу, я вижу, что она была добавлена. Удаление, как это делает ту же проблему. Я удаляю, но вижу только, что при обновлении sh страница удаляется. Как я могу решить эту ситуацию?

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

При успешном удалении вы можете отфильтровать вашего пользователя, если вы не хотите go на сервер, чтобы получить список sh таких пользователей:

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

Таким образом, вы можете поставить это к вашему методу удаления в подписке.

Также вы можете использовать тот же подход при создании, просто добавить нового пользователя в список или получить fre sh с сервера.

Я бы предложил, чтобы в вашем методе create вы возвращали нового пользователя, который был добавлен в БД, и помещали этот объект в ваш массив на стороне клиента, чтобы вы могли получить полный объект с сервера за один вызов.

Answer 2

Обновите sh данные, снова вызвав метод getAllUsers () в вашем компоненте после удаления / создания пользователя. Поскольку ngOnInit () вызывается только один раз после создания компонента.