typescript – Angular2 ag-grid数据源
我试图让一个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",{"chr": "1","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; } 现在这个错误的结果如下:TypeError:在PagetestComponent @ 2:2中的[gridOptions]中未定义rowData.可能是一个类似的错误,但我不能让它工作. 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'); } } 解决方法
只需使用
arrow-function:
getRows: (params: any) => { console.log(params) //var rowData = [ //{"chr": "1","alt": "C"} //] rowData = this.returnRows(); var rowsThisPage = rowData.slice(params.startRow,params.endRow); console.log(rowsThisPage) var lastRow = -1; params.successCallback(rowsThisPage,lastRow); } 这将确保“this-context”不会改变 对于更新的问题 我看到你的错误:你需要返回Observable,否则,不会加载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); }); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |