Question

我正在使用启用了Pager的后端服务器（Java Spring）。我在HTTP调用上每页加载100条记录。

在angular2服务上，它正在消耗API调用＆＃34;？page = 1＆amp; size = 100＆＃34;作为初始调用，而在客户端大小的寻呼机上，它显示10并移动到10页，这很好。但我无法从服务器加载下一块数据。我检查了ServerDataSource并使用了.setPaging（1,100）。

如何加载下一个数据块（2-200）以及如何实现此目的。任何提示都会有所帮助。

@Injectable()
export class AmazonService extends ServerDataSource {

constructor(protected http: Http) {
    super(http);
}

public getAmazonInformation(page, size): Observable<Amazon[]> {

    let url = 'http://localhost:8080/plg-amazon?page=1&size=100';
    this.setPaging(1, 100, true);
    if (this.pagingConf && this.pagingConf['page'] && 
       this.pagingConf['perPage']) {
          url += 
       `page=${this.pagingConf['page']}&size=${this.pagingConf['perPage']}`;
}

return this.http.get(url).map(this.extractData).catch(this.handleError);
}

谢谢！

Answer 1

尝试将设置设置为智能表，如下所示

<ng2-smart-table #grid [settings]="settings" ... >

在您的组件中，定义设置，如下所示：

  public settings: TableSettings = new TableSettings();

  ngOnInit(): void {
      ...
    this.settings.pager.display = true;
    this.settings.pager.perPage = 100;
    ...
  }

Answer 2

此外，如果您需要自定义后端请求，则rssi_protocol = Proto("RSSI", "RSSI protocol") header = ProtoField.ubytes("rssi.header", "Header", base.NONE) Rx = ProtoField.uint8("rssi.rx", "Reception time", base.HEX) Tx = ProtoField.uint8("rssi.tx", "Transmission time", base.HEX) Power = ProtoField.uint8("rssi.power", "Power Attenuation", base.HEX) RSSI1 = ProtoField.uint8("rssi.1", "First RSSI", base.HEX) RSSI2 = ProtoField.uint8("rssi.2", "Second RSSI", base.HEX) RSSI3 = ProtoField.uint8("rssi.3", "Third RSSI", base.HEX) rssi_protocol.fields = {header, Rx, Tx, Power, RSSI1, RSSI2, RSSI3} function rssi_protocol.dissector(buffer, pinfo, tree) length = buffer:len() if length == 0 then return end pinfo.cols.protocol = rssi_protocol.name local subtree = tree:add(rssi_protocol, buffer(), "RSSI Protocol Data") subtree.add(header, buffer(0, 19)) subtree.add(Rx, buffer(19, 1)) subtree.add(Tx, buffer(20,1)) subtree.add(Power, buffer(21,1)) subtree.add(RSSI1, buffer(22, 1)) subtree.add(RSSI2, buffer(23,1)) subtree.add(RSSI3, buffer(24,1)) end DissectorTable.get(<TABLE>)add(<VALUE>, rssi_protocol)的配置参数可用于数据检索/分页/排序。

Answer 3

我用LocalDataSource解决了这个问题。

html

private void cbPlaza_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Plaza selected = (Plaza)cbPlaza.SelectedValue;

    string fileName = "Lane.json";
    string path = System.IO.Path.Combine(Environment.CurrentDirectory, @"Data\", fileName);
    var json = File.ReadAllText(path);

    LaneContainer laneContainer = JsonConvert.DeserializeObject<LaneContainer>(File.ReadAllText(json));
}

ts

<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>

Answer 4

当您在 {endPointBase} / ng2-smart-table 上拥有某个实体的端点时，您在哪里处理 key_like 请求参数（即：@Requestparam映射到spring数据示例），您可以在客户端使用

export class SpringDataSource extends ServerDataSource {
    constructor(http: HttpClient, endPointBase: string) {
        const serverSourceConf = new ServerSourceConf();
        serverSourceConf.dataKey = 'content';
        serverSourceConf.endPoint = endPointBase + `/ng2-smart-table`;
        serverSourceConf.pagerLimitKey = 'size';
        serverSourceConf.pagerPageKey = 'page';
        serverSourceConf.sortFieldKey = 'sort';
        serverSourceConf.totalKey = 'totalElements';

        super(http, serverSourceConf);
    }

    protected addPagerRequestParams(httpParams: HttpParams): HttpParams {
        const paging = this.getPaging();
        return httpParams
            .set(this.conf.pagerPageKey, (paging.page - 1).toString())
            .set(this.conf.pagerLimitKey, paging.perPage.toString());
    }

    protected addSortRequestParams(httpParams: HttpParams): HttpParams {
        const sort: {field: string, direction: string}[] = this.getSort();

        sort.forEach((column) => {
            httpParams = httpParams.append(this.conf.sortFieldKey, `${column.field},${column.direction}`);
        });
        return httpParams;
    }
}

Answer 5

这是我解决所有这些问题的方法。

1：确保后端 (API) 已启用 cors 以向客户端显示“X-Pagination”标头，如下所示：

redirect_uri

2：HTML：

app.UseCors(builder => builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().WithExposedHeaders(new string[] { "X-Pagination"}));

3：服务：

<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>

4：TS：

getClients(pageNumber: number, pageSize: number): Observable<any> {
            const headers = new HttpHeaders({'Content-Type': 'application/json','Accept': 'application/json' });
            let params = new HttpParams();
            params = params.append('PageNumber',pageNumber.toString());
            params = params.append('PageSize',pageSize.toString());
            return this.http.get<ClientDto[]>(API_URL, {headers: headers, observe: "response" as "body",  responseType: "json", params} );
          }

您应该注意到 pageSize = 我们从后端提取的总数据每页显示 = 我们在表格中显示的总数据。

该算法设计为仅在必要时才从API中提取，即当客户端到达数据在内存中结束的页面时，则要求另外30个数据有另外3个页面，并且也不会忘记其他 3 个之前已经提取过。

ng2-smart-table，后端分页（Spring）

5 个答案: