尽管我感到自己快要到那里了,但是我仍无法解决以下问题,因为我目前对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/pagetestponent.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.
pagetestponent.html
pagetestponent.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
发布评论