gpt4 book ai didi

typescript - Angular2 农业网格数据源

转载 作者:太空狗 更新时间:2023-10-29 18:09:09 24 4
gpt4 key购买 nike

我正在尝试让 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;
}

这怎么会导致错误:TypeError: rowData is undefined in [gridOptions in 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');
}

}

最佳答案

只需使用 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);
}

这将确保“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);
});
}

关于typescript - Angular2 农业网格数据源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36934207/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com