Как обновить компонент в Angular сразу после выполнения запроса HttpRequest? - PullRequest
Новая
       50

Как обновить компонент в Angular сразу после выполнения запроса HttpRequest?

0 голосов
/ 09 июля 2019

У меня есть служба, которая получает «сообщения» с сервера, которые затем отображаются в «домашнем» компоненте моего приложения.У меня также есть форма на домашнем компоненте, и сообщения могут быть удалены.Я хочу обновить компонент сразу после создания нового сообщения (с формой) или после удаления сообщения.В настоящее время Post / Delete работает, но мне нужно обновить страницу, чтобы отобразились изменения.

Я пробовал «GET» после post / delete, но все равно не работает.Я предполагаю, что данные не успевают быть удалены / опубликованы до того, как будет выполнена строка кода GET.Я также попытался создать перехватчик и перехватывать каждый HTTP-запрос, но это, похоже, тоже не работает.Любые предложения о том, что я должен изучить.Я довольно плохо знаком с Angular (и веб-разработкой в ​​целом).

[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();
        }

Моя первая попытка была просто попытаться запустить getCurrentNotifications () после this.apiService.removeNotification (this.noti) .subscribe ();и т. д., но это не сработало.Моя вторая попытка была запустить перехватчик, но там тоже не повезло.

1 Ответ

0 голосов
/ 10 июля 2019

Так что это заняло у меня целый день, но я наконец исправил это. запись () => function в подписку запустит функцию после завершения подписки. Так что в моих onRemove и onPost: 

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

Я вызываю функцию обновления для загрузки моего getCurrentNotification, чтобы перезагрузить компонент и получить последние данные. Это работало хорошо для почты, но я не для удаления. Я думал, что это проблема с функцией подписки. Мне потребовалось несколько часов, чтобы понять, что это была внутренняя проблема. Что происходило в бэкэнде, так это то, что для уведомления, проходящего через истечение срока действия, дата «Действителен до» немедленно изменяется на сегодняшнюю дату-час-секунда-мс. Поэтому иногда это происходило слишком быстро, так что запрос завершался до того, как изменилось время, и это приводило к тому, что уведомление не истекало (конечно, пока я не перезагрузил страницу). Таким образом, изменив серверную часть так, чтобы действительное время уведомления с истекшим сроком действия изменилось на текущее время - 1 минута исправила проблему Надеюсь, что это помогает людям, застрявшим на той же проблеме :)

...