Question

我想在我的对象列表中无限滚动，它们是0 NC_000001.10:g.955563G>C 1 NC_000001.10:g.955597G>T 2 NC_000001.10:g.955619G>C 3 NC_000001.10:g.957640C>T 4 NC_000001.10:g.976059C>T 5 NC_000003.11:g.37090470C>T 6 NC_000012.11:g.133256600G>A 7 NC_012920.1:m.15923A>G。将它们转移到承诺并Observable<Object[]>它们不是一种选择，因为它们需要实时更新。

我所做的是await使用了哪种方法，但问题是，只要我采用.map()项而不是20，angular就会重新呈现整个列表

一种解决方案是实际跳过第一个10并加载下一个10，这只会向页面添加新元素。但是我不确定它是否可能？

这就是我所拥有的

打字稿

HTML

// Every time this happens page goes to top
// because all the items are re-rendered, not only new ones
public onScroll(): void {
  this.take += 10; // on ngOnInit() take is set to 10.
  this.sales = this.filteringObservable.map(data => {
    return _.take(data, this.take);
  });
}

Answer 1

这很容易实现，我有多个列表，就像这样。

首先，我想使用某种类型的lib IntoIterator

然后您希望列表使用它：

let

接下来，您要对滚动做出反应，通过<ul infiniteScroll (scrolled)="getItems()"> <li *ngFor="let item of items; trackBy:trackByFn">{{item}}</li> </ul> trackByFn(i: number, item) { return item.<unique-key>; }侦听器执行此操作，如上所示。

现在，无限列表正常工作所需的是每个项目都有一个唯一的密钥。您还需要列表中可用的项目总数以及当前显示的项目数。

以下是我用于此功能的功能，如果您未使用API获取更多结果，则可以根据自己的喜好进行调整。

scrolled

请务必使用每个项目的唯一键替换// isReset decides whether to set offset to 0 or not getItems(isReset = false): void { if (!isReset && this.items.length >= this.total) { return; } this.api.get<CustomResponse>('my-api-endpoint', { limit: 10, offset: isReset ? 0 : this.items.length, }) .pipe( first(), tap((res) => this.total = res.totalsize || 0), map((res) => res.list) ) .subscribe((items) => { // This bit prevents the same batch to be loaded into the list twice if you scroll too fast if (this.items.length && !isReset) { if (items[items.length - 1].<unique-key> === this.items[this.items.length - 1].<unique-key>) { return; } } this.items = isReset ? items : [...this.items, ...items]; }) ); }。

我希望这会有所帮助。

Answer 2

这就是我们使用Angular 5和WebApi作为服务器端的方式。我们已经在表格中实现了某种排序，但您可以只使用滚动部分并在列表中使用它。此外，我们从表中获取所有数据，然后将其发送到10个块的客户端，但如果您需要速度，则可以在SQL服务器中分页数据，一次只能处理10行。如果您需要这种分页的逻辑，请告诉我。

HTML

<div #scb id="scb" class="scrollBarClass" *ngIf="sales && sales.length" (scroll)="onScroll()">
    <div class="table table-striped table-responsive table-sm table-bordered">
        <table class="table" *ngIf="sales && sales.length">
        // here goes you table structure, headers, body and so...
        </table>
    </div>
</div>

CSS

.scrollBarClass {
  max-height: 500px;
  overflow-y: scroll;
}

角度分量

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';

@ViewChild('scb') grid: ElementRef;
scroll = false;
page = 1; 
total = 0;   

onScroll() {
    if (this.grid.nativeElement.scrollHeight - this.grid.nativeElement.scrollTop < 510 && this.scroll == false) {
        if (this.sales.length == this.total) {
            return;
        }
        let p: any;
        this.page++;
        this.scroll = true;
        this._myService.searchSales(this.page, 10, this.sortType, this.sortAD)
            .subscribe(
                (data) => { p = data['data']; this.total = data['count']},
                error => { this.errorMessage = <any>error; this.page--; },
                () => {
                    this.scroll = false;
                    Array.prototype.push.apply(this.sales, p);
                });
    }
}

角度服务

searchSales(page: number, recperpage: number, sorttype: string, sortad: string) {
    let params = new HttpParams()
        .append('page', page.toString())
        .append('recperpage', recperpage.toString())
        .append('sorttype', sorttype)
        .append('sortad', sortad);
    return this._http.get<any[]>('sales/searchsales', { params: params });
}

WebAPI控制器

[HttpGet]
public IHttpActionResult searchsales(int page, int recperpage, string sorttype, string sortad)
{
    try
    {
        var count = 0;
        var r = _salesService.SearchSales(sorttype, sortad, ref count);
        return Ok(new { data=r.Skip((page - 1) * recperpage).Take(recperpage).ToList(), count });
    }
    catch (Exception e)
    {
        return InternalServerError(e);
    }
}

WebAPI服务

public List<Sales> SearchSales(string sorttype, string sortad, ref int count)
{
    var query = "";

    query = " select * FROM Sales "+
            " ORDER BY " + ((sorttype == null) ? "DateOfSale" : sorttype) + " " + ((sortad == null) ? "DESC" : sortad);
    var result = SQLHelper.ExecuteReader(query);
    count = result.Count;
    return result;
}

Answer 3

以下是我在此场景中使用的一些代码：

private filterModel: FilterModel = new FilterModel();
private page: number = 0;

items: ResultModel[] = [];

public onScroll(): void {

  if (this.scrolling) {
    return;
  }
  this.scrolling = true;
  this.page++;

  this.service.loadStuff(this.filterModel, this.page).subscribe(items => {
      !items || !items.length
        ? this.page--
        : items.forEach(item => this.items.push(item));
      this.scrolling = false;
    },
    () => this.scrolling = false);
}

其中filterModel是一个对象，其中包含有关要加载的内容以及如何加载内容的数据 - 页面大小，属性过滤器等。

如果您想以更多RxJs的方式完成此任务，您可以尝试这样的事情（未经测试，根据您的需求调整）：

private filterModel: FilterModel = new FilterModel();
private filter$ = new Subject<FilterModel>();

private page: number = 0;
private page$ = new Subject<number>();

private cache: ResultModel[][] = [];

items$: Observable<ResultModel>;

ngOnInit() {

  const filter$ = this.filter$.pipe(
    debounceTime(1000),
    distinctUntilChanged(),
    tap(() => this.cache = []),
    map(model => ({ model: this.filterModel = model, page: 0 }))
  );
  const page$ = this.page$.pipe(
    map(pageNumber => ({ model: this.filterModel, page: pageNumber }))
  );

  this.items$ = merge(page$, filter$).pipe(
    startWith({ model: this.filterModel, page: this.page }),
    tap(() => this.scrolling = true)
    mergeMap(({ model: FilterModel, page: number }) => 
      this.service.loadStuff(model, page).pipe(
        tap(response => this.cache[page] = response.items)
      )
    ),
    tap(response => ... ), // Do whatever else with your response here
    map(() => _.flatMap(this.cache)),
    tap(() => this.scrolling = false)
  );
}

onScroll() {
  this.page$.next(this.page++);
}

onFilter(model: FilterModel){
  this.filter$.next(model);
}

希望这能以正确的方式引导你：）

Observable <object []> - 我可以跳过/拿走吗？

3 个答案:

HTML

CSS

角度分量

角度服务

WebAPI控制器

WebAPI服务