Question

我正在尝试使用ag-grid数据源在angular2中工作，虽然我觉得我差点在那里但是我无法使用我目前对angular / typescript的知识解决以下问题。

问题是我有一个名为returnRows的函数，它完全正常（参见testdata变量）。但是当我尝试在datasource.getRows中调用它时，我得到以下异常：TypeError：this.returnRows不是PagetestComponent @ 2：2中的[gridOptions]中的函数。最后，我想用一个从api获取数据的服务替换该函数。

这是我的component.ts代码：

FROM ubuntu:latest
MAINTAINER Inacio Medeiros <inaciogmedeiros@gmail.com>

# Install the python script required for "add-apt-repository"
RUN apt-get update \
    && apt-get install -y --force-yes \
        build-essential \
        libgl1-mesa-dev \
        python-software-properties \
        software-properties-common \
        wget \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Sets language to UTF8 : this works in pretty much all cases
ENV LANG pt_BR.UTF-8
RUN locale-gen $LANG

# INSTALL JAVA
# ==============================================================
# Setup the openjdk 8 repo
RUN add-apt-repository ppa:openjdk-r/ppa

# Install java8
RUN apt-get update \
    && apt-get install -y --force-yes \
        openjdk-8-jdk \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Setup JAVA_HOME and other environment variables, this is useful for docker commandline
ENV JAVA_HOME /usr/lib/jvm/java-8-openjdk-amd64/
ENV PATH $PATH:$JAVA_HOME/bin
ENV CLASSPATH $JAVA_HOME/lib/tools.jar
ENV MANPATH $JAVA_HOME/man
# ==============================================================

# Install QT Android
# ==============================================================
RUN mkdir -p /var/tmp/qt-android \
    && cd /var/tmp/qt-android \
    && wget "http://download.qt.io/official_releases/qt/5.5/5.5.0/qt-opensource-linux-x64-android-5.5.0-2.run" \
    && chmod 777 qt-opensource-linux-x64-android-5.5.0-2.run \
    && /var/tmp/qt-android/qt-opensource-linux-x64-android-5.5.0-2.run \
    && cd / \
    && rm -rf /var/tmp/qt-android
# ==============================================================

# Install Ant
RUN apt-get update \
    && apt-get install -y --force-yes \
        ant \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Install SDK
RUN mkdir -p /opt/android-sdk \
    && cd /opt/android-sdk \
    && wget -O - "http://dl.google.com/android/android-sdk_r24.3.4-linux.tgz" \
        | tar --strip-components=1 -zxf -

#Install NDK
RUN mkdir /var/tmp/ndk \
      && cd /var/tmp/ndk \
      && wget "http://dl.google.com/android/ndk/android-ndk-r10e-linux-x86_64.bin" \
      && chmod 777 android-ndk-r10e-linux-x86_64.bin \
      && /var/tmp/ndk/android-ndk-r10e-linux-x86_64.bin \
      && cd / \
      && rm -rf /var/tmp/ndk

# Run SDK Update
RUN cd /opt/android-sdk/tools \
    && chmod 777 android \
    && /opt/android-sdk/tools/android update sdk

# Update libraries
RUN apt-get update \
    && apt-get upgrade -y --force-yes \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Install libraries
RUN apt-get update \
    && apt-get install -y --force-yes \
        libstdc++6 \
        libgcc1 \
        libsdl1.2debian \
        zlib1g \
        libncurses5 \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Install Android studio
# Source: https://github.com/wolfitem/docker/blob/master/Dockerfiles/android-studio/Dockerfile
RUN apt-get update \
    && apt-get install -y --force-yes \
        unzip \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

RUN wget 'https://dl.google.com/dl/android/studio/ide-zips/2.1.0.9/android-studio-ide-143.2790544-linux.zip' -O /tmp/studio.zip \
    && unzip -d /opt /tmp/studio.zip \
    && rm /tmp/studio.zip

USER developer

CMD /opt/android-studio/bin/studio.sh

更新，感谢@Dinistro回答我的初步问题。

更新的代码（部分）：

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

并为returnRows函数添加了服务。

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

现在错误中出现了这种情况：TypeError：在PagetestComponent @ 2：2中的[gridOptions]中未定义rowData。可能是一个类似的错误，但我无法让它发挥作用。

pagetest.component.html

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

pagetest.service.ts

<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>

Answer 1

只需使用arrow-function：

 command.Parameters.AddWithValue("név",NévTextBox.Text);

这将确保“此上下文”不会改变

有关更新的问题

我看到你的错误：你需要返回Observable，否则，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); }将不会被加载：

rowData

然后像这样使用它：

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

Angular2 ag-grid数据源

1 个答案: