Angular2 Ag-Grid数据源 [英] Angular2 ag-grid datasource

问题描述

尽管我感到自己快要到那里了，但是我仍无法解决以下问题，因为我目前对angular / typescript的了解无法解决。

I am trying to get a ag-grid datasource to work in angular2, although I got the feeling that I am nearly there I am not able to fix the following issue with my current knowledge of angular/typescript.

问题是我有一个名为returnRows的函数，该函数运行良好（请参见testdata变量）。但是，当我尝试在datasource.getRows中调用它时，出现以下异常：TypeError：this.returnRows不是[PagetestComponent @ 2：2中的gridOptions]中的函数。最后，我想用从api获取数据的服务替换该函数。

The problem is that I have a function called returnRows, which works perfectly fine (see testdata variable). But the moment I try to call it within datasource.getRows I get the following exception: TypeError: this.returnRows is not a function in [gridOptions in PagetestComponent@2:2]. In the end I would like to replace the function with a service that gets the data from an api.

这是我的component.ts代码：

Here is my component.ts code:

import {Component, OnInit} from 'angular2/core';
import {RouteParams} from 'angular2/router';

import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';

import {PagetestService} from '..//services/pagetest.service';

@Component({
  selector: 'sample',
  templateUrl:'/static/app/pagetest/components/pagetest.component.html',
  directives: [AgGridNg2],
  providers: [PagetestService]
})

export class PagetestComponent implements OnInit{
    public gridOptions: GridOptions;
    private columnDefs: any[];
    private testdata: any[];

    constructor(
        public _routeParams: RouteParams,
        public _variantsService: PagetestService) {
    }

    ngOnInit(){
        this.columnDefs = [
          {headerName: "ID", field: "_id",},
          {headerName: "CHR", field: "chr"},
          {headerName: "POS", field: "pos"},
          {headerName: "REF", field: "ref"},
          {headerName: "ALT", field: "alt"},
        ];
        this.gridOptions = <GridOptions>{};
        this.gridOptions.datasource = this.dataSource;
        this.testdata = this.returnRows();
    }

    dataSource = {
        //rowCount : -1,
        pageSize: 1,
        overflowSize: 100,

        getRows: function(params: any){
            console.log(params)
            //var rowData = [
                //{"chr": "1", "_id": "1-22848972-A-C", "ref": "A", "pos": 22848972, "alt": "C"},
                //{"chr": "1", "_id": "1-33133968-T-C", "ref": "T", "pos": 33133968, "alt": "C"}
            //]
            rowData = this.returnRows();
            var rowsThisPage = rowData.slice(params.startRow, params.endRow);
            console.log(rowsThisPage)
            var lastRow = -1;
            params.successCallback(rowsThisPage, lastRow);
        }
    }

    returnRows(){
        var rowData = [
            {"chr": "1", "_id": "1-22848972-A-C", "ref": "A", "pos": 22848972, "alt": "C"},
            {"chr": "1", "_id": "1-33133968-T-C", "ref": "T", "pos": 33133968, "alt": "C"}
        ]
        return rowData
    }
}

更新，感谢@Dinistro回答了我的第一个问题。

Update, thanks @Dinistro for answering my initial question.

更新的代码（部分）：

getRows: (params: any) => {
    var rowData = this.returnRows();
    var rowsThisPage = rowData.slice(params.startRow, params.endRow);
    var lastRow = -1;
    //if (rowData.length <= params.endRow) {
        //lastRow = rowData.length;
    //}
    // call the success callback
    params.successCallback(rowsThisPage, lastRow);
}

并向returnRows函数添加了服务。

And added service to returnRows function.

returnRows() {
    var rowData: any;
    this._variantsService.getVariants().subscribe(
        variants => rowData = variants
    );
    console.log(rowData)
    return rowData;
}

这现在会导致错误：TypeError：rowData在[ PagetestComponent @ 2：2中的gridOptions]。可能是类似的错误，但是我无法使它正常工作。

This how ever results now in the error: TypeError: rowData is undefined in [gridOptions in PagetestComponent@2:2]. Probably a similar mistake but I can't get it to work.

pagetest.component.html

pagetest.component.html

<h1>Pagetest</h1>
<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefs"

  rowModelType = "pagination"

  enableColResize>
</ag-grid-ng2>

pagetest.service.ts

pagetest.service.ts

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class PagetestService {
  constructor (private http: Http) {}

  private _variantsUrl = '/api/variant/';  // URL to web api

  getVariants () {
    return this.http.get(this._variantsUrl)
                    .map(res => res.json())
                    .catch(this.handleError);
  }
  private handleError (error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
  }

}

推荐答案

只需使用箭头功能：

getRows: (params: any) => {
    console.log(params)
    //var rowData = [
    //{"chr": "1", "_id": "1-22848972-A-C", "ref": "A", "pos": 22848972, "alt": "C"},
    //{"chr": "1", "_id": "1-33133968-T-C", "ref": "T", "pos": 33133968, "alt": "C"}
    //]
    rowData = this.returnRows();
    var rowsThisPage = rowData.slice(params.startRow, params.endRow);
    console.log(rowsThisPage)
    var lastRow = -1;
    params.successCallback(rowsThisPage, lastRow);
}

这将确保此上下文未更改

This will make sure, that the "this-context" is not changed

对于更新的问题

我看到您的错误：您需要返回Observable，否则，将不会加载 rowData ：

I see your error: You need to return the Observable, because otherwise, the rowData will not be loaded:

returnRows() {
    return this._variantsService.getVariants();
}

然后像这样使用它：

getRows: (params: any) => {
    this.returnRows().subscribe(rowData => {
        var rowsThisPage = rowData.slice(params.startRow, params.endRow);
        var lastRow = -1;
        //if (rowData.length <= params.endRow) {
        //lastRow = rowData.length;
        //}
        // call the success callback
        params.successCallback(rowsThisPage, lastRow);
    });
}

这篇关于Angular2 Ag-Grid数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！