加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

typescript – Angular2 ag-grid数据源

发布时间:2020-12-17 17:01:34 所属栏目:安全 来源:网络整理
导读:我试图让一个ag-grid数据源在angular2中工作,虽然我感觉我几乎在那里我无法用我目前对angular / typescript的知识解决以下问题. 问题是我有一个名为returnRows的函数,它完全正常(参见testdata变量).但是当我尝试在datasource.getRows中调用它时,我得到以下异
我试图让一个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);
    });
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读