Angular2 Ag-Grid Datenquelle

Question

Ich versuche eine Ag-Grid-Datenquelle zu bekommen, um in angular2 zu arbeiten, obwohl ich das Gefühl habe, dass ich fast da bin. Ich bin nicht in der Lage, das folgende Problem mit meinem derzeitigen Wissen über eckig/typescript zu beheben .

Das Problem ist, dass ich eine Funktion namens returnRows habe, die tadellos funktioniert (siehe testdata-Variable). Aber in dem Moment, in dem ich versuche, es in datasource.getRows aufzurufen, bekomme ich die folgende Ausnahme: TypeError: this.returnRows ist keine Funktion in [gridOptions in PagetestComponent @ 2: 2]. Am Ende möchte ich die Funktion durch einen Dienst ersetzen, der die Daten von einer API erhält.

Hier ist mein 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 
    } 
} 

Update dank @Dinistro für meine erste Frage zu beantworten.

Aktualisiert Code (teilweise):

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

und zusätzlicher Service zu returnRows Funktion.

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

Dies führt, wie schon jetzt in den Fehler: Typeerror: rowData ist nicht definiert in [gridOptions in PagetestComponent @ 2: 2]. Wahrscheinlich ein ähnlicher Fehler, aber ich kann es nicht zur Arbeit bringen.

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

Verwenden Sie einfach ein 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); 
} 

Dadurch wird sichergestellt, dass die „this- Kontext "wird nicht geändert

Für die aktualisierte Frage

Ich sehe dein Fehler: Sie müssen die beobachtbare zurückkehren, denn sonst wird die rowData nicht geladen werden:

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

Und es dann wie folgt verwenden :

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