Angular2 ag-grid datasource

Question

我想獲得一個ag-grid數據源在angular2中工作，雖然我覺得我差不多在那裏我不能用我目前對angular/typescript的瞭解來解決以下問題。

問題是我有一個名爲returnRows的函數，它可以很好地工作（請參閱testdata變量）。但是當我嘗試在datasource.getRows中調用它時，我得到以下異常：TypeError：this.returnRows不是[PagetestComponent @ 2：2中的gridOptions]中的函數。最後，我想用一個從api獲取數據的服務來替換函數。

這裏是我的component.ts代碼：

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回答我最初的問題。

更新碼（部分）：

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功能。

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

該怎麼過的錯誤，現在的結果：類型錯誤：rowData是一個不確定的[gridOptions在PagetestComponent @ 2：2]。可能是一個類似的錯誤，但我不能得到它的工作。

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

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'); 
    } 

} 

Answer 1

只需使用arrow-function：

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); 
} 

這將確保，認爲「這 - 上下文「不變

---

有關更新問題

我看到你的錯誤：你需要返回觀察的，因爲否則rowData將不會被加載：

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); 
    }); 
}