Как получить данные снова из API после того, как что-то изменилось в компоненте, используя Observables? - PullRequest
Новая
       11

Как получить данные снова из API после того, как что-то изменилось в компоненте, используя Observables?

0 голосов
/ 25 сентября 2018

У меня есть DataServive, который извлекает контент из API: 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError, retry } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

@Injectable()

export class DataService {
  this.request = {
     count: 10
  }

  constructor(private http: HttpClient) { }

  private handleError(error) {
    console.log(error);
  }

  public getData(count): Observable<any> {
    this.request.count = count;

    return this.http.post<any>(environment.api + '/path', this.request).pipe(
      map(response => {
        return response;
      }),
      catchError(error => {
        this.handleError(error);
        return [];
      })
    );
  }
}

Это DataServie заполняется таким компонентом: 

ngOnInit() {
  const subscriber = this.dataService.getData(this.count).subscribe((data) => { this.data = data; });
}

И это работаетотлично.

Однако пользователь может изменить переменную this.count (сколько элементов должно отображаться) в компоненте.Поэтому я хочу получать новые данные с сервера, как только это значение изменится.

Как мне этого добиться?

Конечно, я мог бы позвонить destroy наthis.subscriber и снова позвоните ngOnInit(), но это не похоже на правильный путь.

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Самый простой способ - просто отписаться: 

subscriber: Subscription;

ngOnInit() {
  this.makeSubscription(this.count);
}

makeSubscription(count) {
  this.subscriber = this.dataService.getData(this.count).subscribe((data) => { this.data = data; });
}

functionInvokedWhenCountChanges(newCount) {
  this.subscriber.unsubscribe();
  makeSubscription(newCount);
}

Но поскольку аргумент count это просто одно число, это означает, что HTTP всегда запрашивает данные от 0 до x.В этом случае вы можете лучше создать другую тему, где вы можете хранить предыдущие результаты (чтобы вам не нужно было делать бесполезные HTTP-запросы) и использовать эту тему в качестве источника данных.Это требует некоторого планирования ваших потоков, но определенно является предпочтительным способом.

0 голосов
/ 25 сентября 2018

Когда пользователь меняет count, снова наберите getData(count) с обновленным значением count.Необходимо просмотреть файл html, но может помочь кнопка с (click)="getData(count)".

...