Kendo 网格：使用 HttpClient 而不是 Http 的服务器端分页

Question

我在使用 HttpClient 而不是旧的 Http 进行服务器端分页时遇到困难。

我遇到困难的地方是删除“.map”和处理对 GridDataResult 接口的响应

旧服务看起来像这样

  constructor(private http: Http) { }

  public fetch(state: DataSourceRequestState): Observable<DataResult> {
    const queryStr = `${toDataSourceRequestString(state)}`; // Serialize the state

    return this.http
      .get(`${this.BASE_URL}?${queryStr}`)
      .map(response => response.json())
      .map(({ results, count }) => /
        (<GridDataResult>
          data: results,
          total: count,
        })
      )
    }

我的新服务会是什么样子？

我认为它看起来像这样，但无法让它工作

   constructor(private http: HttpClient) { }

    public fetch(state: DataSourceRequestState): Observable<DataResult> {
      const queryStr = `${toDataSourceRequestString(state)}`; // Serialize the state

      return this.http
        .get<GridDataResult>(`${this.BASE_URL}?${queryStr}`)
        .map(({ results, count }) =>
          (<GridDataResult>{             
            data: results,
            total: count,
          })
        )
      }

Answer 1

不确定这是否是正确的方法

为了让它工作，我将数据映射到任何 ((data:any) 然后能够使用服务器端分页

return this.http
  .get<GridDataResult>(`${this.BASE_URL}?${queryStr}`)
  .map((data: any) =>
    (<GridDataResult>{
      data: data.results,
      total: data.count,
    })
  )

}

Answer 2

我遇到了与此相同的问题，但已通过从稍微不同的位置获取数据和总数来解决。

return this.httpClient
  .get<DataResult>(`${this.BASE_URL}/EmailAccounts?${queryStr}`) // Send the state to the server
  .map( (data: any) =>
    (<GridDataResult>{
      data: data.result.data,
      total: data.result.total,
    })
  )

我查看了从 api 和 fiddler 返回的数据，以找到数据的位置和总数。这适用于 dotnet core 2.0 控制器 和 Kendo.Mvc.Extensions ToDataSourceResult 函数。

// GET: api/EmailAccounts
[HttpGet("[action]")]
public async Task<JsonResult> EmailAccounts([DataSourceRequest] DataSourceRequest request)
{
    return Json(await _context.EmailAccounts.ToDataSourceResultAsync(request));
}

我返回的数据格式。

{
    "result":
    {
        "data":[
            {"id":1,"hostName":"TestHost","protocall":1,"port":336,"useSsl":true,"username":"usrname","password":"112345"},
            {"id":2,"hostName":"TestHost","protocall":1,"port":336,"useSsl":true,"username":"usrname","password":"112345"}
        ],
        "total":2,
        "aggregateResults":null,
        "errors":null
    },
    "id":26,
    "exception":null,
    "status":5,
    "isCanceled":false,
    "isCompleted":true,
    "isCompletedSuccessfully":true,
    "creationOptions":8,
    "asyncState":null,
    "isFaulted":false
}

Kendo 网格：使用 HttpClient 而不是 Http 的服务器端分页

Kendo Grid: Server Side Paging with HttpClient rather than Http

kendo-grid

kendo-ui-angular2

angular