模块ag-grid-angular / main没有导出的成员AgGridNg2.ts

时间:2019-06-19 21:04:38

标签: angular ag-grid

我将ag-grid安装到了Angular 7应用程序中,并且正在遵循Enable Selection for ag-grid上的ag-grid教程。当我尝试导入AgGridNg2时,我得到了Module ag-grid-angular/main has no exported member AgGridNg2.ts。我只能假设此插件的文档已过时。我需要解决什么才能使其正常工作?这是我的component.ts:

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AgGridNg2 } from 'ag-grid-angular';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
  @ViewChild('agGrid') agGrid: AgGridNg2;
      columnDefs = [
        {headerName: 'Make', field: 'make', sortable: true, filter: true, checkboxSelection: true },
        {headerName: 'Model', field: 'model', sortable: true, filter: true },
        {headerName: 'Price', field: 'price', sortable: true, filter: true }
    ];

rowData: any;

  constructor(private http: HttpClient) {

    }

  ngOnInit() {
    this.rowData = this.http.get('https://api.myjson.com/bins/15psn9');
  }

}

编辑:这是package.json

{
  "name": "webapplication12",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run WebApplication12:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "7.2.5",
    "@angular/common": "7.2.5",
    "@angular/compiler": "7.2.5",
    "@angular/core": "7.2.5",
    "@angular/forms": "7.2.5",
    "@angular/http": "7.2.5",
    "@angular/platform-browser": "7.2.5",
    "@angular/platform-browser-dynamic": "7.2.5",
    "@angular/platform-server": "7.2.5",
    "@angular/router": "7.2.5",
    "@nguniversal/module-map-ngfactory-loader": "7.1.0",
    "ag-grid-angular": "^21.0.1",
    "ag-grid-community": "^21.0.1",
    "ag-grid-ng2": "^8.0.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.5",
    "jquery": "3.3.1",
    "oidc-client": "^1.6.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.4.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.5",
    "@angular/cli": "~7.3.5",
    "@angular/compiler-cli": "^7.2.8",
    "@angular/language-service": "^7.2.5",
    "@types/jasmine": "~3.3.9",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~11.10.5",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "typescript": "~3.2.4"
  },
  "optionalDependencies": {
    "node-sass": "^4.9.3",
    "protractor": "~5.4.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

2 个答案:

答案 0 :(得分:3)

尝试使用 AgGridAngular 代替 AgGridNg2

import { AgGridAngular } from 'ag-grid-angular';
...
@ViewChild('agGrid') agGrid: AgGridAngular;

答案 1 :(得分:0)

我正在使用Angular 8,并且@ViewChild('agGrid')期望有2个参数(但有1个),所以对我有用的很简单:

import { AgGridAngular } from 'ag-grid-angular';
...
private agGrid: AgGridAngular;