Question

我有一项服务，该服务从服务器获取“帖子”，然后将其显示在应用程序的“主页”组件上。我在home组件上也有一个表格，帖子可以删除。我想在发布新帖子（使用表单）后或删除帖子后立即更新组件。目前，“发布/删除”功能确实有效，但是我必须刷新页面才能显示更改。

我在发布/删除后尝试使用“ GET”，但仍然无法正常工作。我假设在执行GET代码行之前，数据没有时间要删除/发布。我还尝试创建一个拦截器并拦截每个HTTP请求，但这似乎也不起作用。关于我应该研究的任何建议。我对Angular（以及一般而言的Web开发）还很陌生。

[api.service.ts]

        @Injectable({
        providedIn: "root"
        })

        getHomeNotifications(): Observable<HomeComponent[]> {
        return this.http.get<HomeComponent[]>(
        this.api + "/notification/list/active"
        );
        }

        removeNotification(Notifications): Observable<HomeComponent> {
        return this.http.post<HomeComponent>(
        this.api + "/notification/expire",
        Notifications
        );
        }

        postNotifications(form: HomeComponent): Observable<HomeComponent> {
        return this.http.post<HomeComponent>(
        this.api + "/notification/create",
        form
        );
        }

[拦截器]

        intercept(req: HttpRequest<any>, next: HttpHandler): 
        Observable<HttpEvent<any>> {
        return next.handle(req).pipe(finalize(()=>
        this.apiService.getCurrentNotifications()
        }

[home.component.ts]

        getCurrentNotifications(): void {
        this.apiService.getHomeNotifications().subscribe(data => {
        this.notifications = data;
        });
        }

        onRemove(id) {
          this.noti = new Notifications();
          this.noti.notificationId = id;
          this.apiService.removeNotification(this.noti).subscribe();
        });


        onPost(): void {
          this.apiService.postNotifications(this.pushForm.value).subscribe();
        }

我的第一次尝试是试图在this.apiService.removeNotification（this.noti）.subscribe（）;之后运行getCurrentNotifications（）；等，但没有用。我的第二次尝试是运行拦截器，但那里也没有运气。

Answer 1

所以这花了我一整天，但我终于解决了它。在订阅中写入() => function会在订阅完成后触发该功能。因此，在我的onRemove和onPost中：

 onPost(): void {
          this.apiService.postNotifications(this.pushForm.value).subscribe(() => this.getCurrentNotification());
        }

我正在调用更新函数以加载我的getCurrentNotification，以重新加载组件并获取最新数据。这工作不错的职位，但我没有删除。我认为这是订阅功能的问题。我花了几个小时去思考，这是一个后端问题。后端发生的情况是，对于通知正在通过到期请求，将“有效期”日期立即更改为今天的date-hour-second-ms。因此有时，这种情况发生得太快了，以至于时间更改之前请求已完成-这将导致通知不过期（直到我重新加载页面为止）。因此更改后端，以便将过期的通知有效时间更改为当前时间-1分钟解决了该问题。希望这可以帮助人们解决同样的问题:)

发出HttpRequest后，如何立即更新Angular中的组件？

1 个答案: