时间戳

首页 > 解决方案 > 添加新项目后未更新可观察表

angular - 添加新项目后未更新可观察表

问题描述

我为锻炼制作了简单的 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 => {});
}

刷新页面后，新数据在表中，但是不刷新如何获取呢？请问有人可以解释我做错了什么吗？谢谢

标签： angularngrx

解决方案

使用async管道将请求结果获取到 UI。

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

推荐阅读