Как я могу использовать наблюдаемые для разбивки на страницы данных? - PullRequest
Новая
       8

Как я могу использовать наблюдаемые для разбивки на страницы данных?

0 голосов
/ 30 апреля 2019

Я провел последние несколько дней, изучая наблюдаемые, и начал использовать их в своем приложении Angular. У меня есть приложение Web API, для которого я создаю клиента через NSwagClient в машинописи. У меня есть действие API, которое имеет это в качестве своей подписи: 

Task<ActionResult<List<Product>>> GetProducts(int skip, int take)

Клиент API, который у меня есть в машинописи, вызывается так: 

_client.GetProductsAsync(0, 10).subscribe(next => {console.log(next)}, err => {}, () => {})

По-моему, когда я спрашиваю о следующей загрузке продуктов (например, пропустить 10, взять 10, а затем пропустить 20, взять 10), мне нужно обновить параметры исходного _client.GetProductsAsync call. Но, похоже, я не могу сделать это, не отменив подписку и не подписавшись на наблюдаемое с новыми параметрами. Кажется, это работает против концепции наблюдаемых в моем сознании как потоков данных, поскольку наблюдаемое должно быть создано один раз, а затем каким-то образом «сработало», чтобы получить больше результатов и передать их Обозревателю.

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

Ответы [ 3 ]

1 голос
/ 30 апреля 2019

Вам понадобится Subject, содержащий текущую страницу и использующий один из следующих типов операторов RxJS: concatMap, switchMap илиmergeMap.

Страница Subject вызовет наблюдаемую цепочку, когда на нее будет вставлено новое значение. 

page$ = new Subject<number>();

В вашем HTML-шаблоне вы будетеВам нужен контент, который строит ваши ссылки / кнопки нумерации страниц, которые будут выдвигать новое значение в теме вашей страницы при нажатии на нее: 

<button (click)="page$.next(pageNum)">{{ pageNum }}</button>

Теперь ваши вызовы данных могут использовать page$ при условиивызвать новый запрос от вашего сервера для этих частичных результатов.Когда страница изменится, в ваш API будет сделан новый вызов. 

data$ = page$.pipe(
    map(page => (page - 1) * 10), // map to 'skip' value
    switchMap(skip => this.apiService.getProducts(skip, 10))
);
1 голос
/ 30 апреля 2019

Нет, каждый раз, когда вы получаете другую страницу данных, вы делаете очередной http-запрос.Http запрашивает огонь один раз, а затем наблюдаемое завершается.

0 голосов
/ 30 апреля 2019

Я создал библиотечный вызов ngx-rxcache, который позволяет вам создавать наблюдаемое управление состоянием для Angular.

https://github.com/adriandavidbrand/ngx-rxcache

Вы можете создать сервис с переменной $ наблюдаемой продукции 

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private productCache = this.cache.get<Product[]>({
    id: '[Product] products'
  });

  products$ = this.productCache.value$;

  loading$ = this.productCache.loading$;

  constructor(private http: HttpClient, private cache: RxCacheService) { }

  load(page: number) {
    this.usersCache.load(() => this.http.get<Product[]>(`product/${page}`));
  }
}

Тогда в вашем компоненте вы можете оставаться подписанным на продукты $ observable и обновлять его методом load. 

products$ = this.productService.products$;

goto(page: number) {
  this.productService.load(page);
}

Вы можете прочитать статью, которую я написал об этом здесь.

https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

...