Наблюдаемая таблица не обновляется после добавления нового элемента

Question

Я создаю простое приложение CRUD для упражнений, и у меня автоматически возникают проблемы с таблицей обновлений.

Я вызываю данные из API, а также публикую новые данные в API. В приложении я показываю список таблиц с помощью ng-bootstrap, а для добавления нового элемента я использую модальное окно начальной загрузки.

В моем service приведен мой код для получения всех пользователей и добавления нового пользователя

getUsers(): Observable<UserModel[]> {
return this.httpClient.get<UserModel[]>(environment.BASE_URL + this.apiurlAllUsers).pipe(
  tap(data => console.log(data)),
  catchError(this.handleError)
);
}


updateUser(formData) {
this.httpClient.post(environment.BASE_URL + "user/add/", formData)
.subscribe(response => this.getUsers(), error => console.log(error));
}

и вот код из user.component

getUsersInList() {
this.allUsers = [];
this.userService.getUsers().subscribe((data: any[]) => {
  this.collectionSize = data.length;
  this.allUsers = data;
});
}

//passing formData from modal box to service

modalRef.result
  .then(result => {
    this.userService.updateUser(result);
  })
  .catch(error => {});
}

После обновления страницы в таблице появляются новые данные, но как их получить без обновления? Если кто-то может мне объяснить, что я делаю неправильно? Thnx

Answer 1

Обновите свой метод обслуживания, чтобы он возвращал наблюдаемые

updateUser(formData) {
 return this.httpClient.post(environment.BASE_URL + "user/add/", formData);
}

, затем в пользовательском компоненте

modalRef.result
  .then(result => {
    this.userService.updateUser(result).subscribe((data)=>{
    this.getUsersInList()
    });
  })
  .catch(error => {});
}

Также удалите this.allUsers = []; из ваших bcs getUsersInList, он очистит список, и пользовательский интерфейс покажетпустая страница до загрузки данных

Answer 2

Используйте канал async для получения результата запроса в пользовательском интерфейсе.

<div *ngFor="let user of getUsers() | async"> ...

Answer 3

Не подписывайтесь на сервис. Верните наблюдаемое из вашего updateUser() метода (который должен называться createUser() или addUser(), кстати). Затем используйте switchMap() в компоненте, чтобы снова отобразить список пользователей, когда вы знаете, что создание успешно завершено:

from(modalRef.result).pipe(
  switchMap(() => this.userService.createUser(result)),
  switchMap(() => this.userService.getUsers())
).subscribe(users => this.allUsers = users);

Кроме того, не используйте any. Определите интерфейс User, описывающий структуру пользователя, и используйте его. И не храните collectionSize, поскольку вы можете получить его просто из allUsers.length: это избыточно.