Angular2グリッドデータソース

Question

ang2で動作するようにグリッドデータソースを取得しようとしていますが、私がほとんどそこにいると感じていますが、私の現在の角度/タイスクリプトに関する次の問題を解決できません。

問題は、完全に正常に動作するreturnRowsという関数があることです（testdata変数を参照）。しかし、私がdatasource.getRows内で呼び出そうとすると、次の例外が発生します。TypeError：this.returnRowsは[gridOptions in PagetestComponent @ 2：2]の関数ではありません。最後に、APIからデータを取得するサービスに関数を置き換えたいと思います。

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私の最初の質問に答えるために：

は、ここに私のcomponent.tsコードです。

更新されたコード（部分）：

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

これはどのようにこれまでにエラーになりました結果：TypeError例外を：rowDataは[：2 2 @ PagetestComponentでgridOptions]で定義されていません。おそらく似たような間違いですが、私はそれを働かせることはできません。

<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を使用pagetest.component.html：

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-こと「コンテキスト」は変更されません

あなたは、観測を返す必要があり、そうでない場合は、 rowDataがロードされませんので、：このようにそれを使用し、その後

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

そして、私はあなたのエラーを参照してください更新質問

については10

---

：