例外：在 AgGridNg2 上找不到指令注释答案

【问题标题】：EXCEPTION: No Directive annotation found on AgGridNg2例外：在 AgGridNg2 上找不到指令注释
【发布时间】：2016-04-25 21:31:41
【问题描述】：

为什么带有 ag-grid 的 TypeSctipt 上的 this example 不起作用？

控制台出现错误：

EXCEPTION: No Directive annotation found on AgGridNg2

带有问题行的cars.ts代码：

import {Component, View} from 'angular2/angular2'
import {CarsService} from './cars_service'

@Component({
  selector: 'cars',
  bindings: [CarsService]
})
@View({
  template: `
      <ag-grid-ng2 id="cars" class="ag-fresh"
        [column-defs]="columnDefs" [row-data]="rowData">
      </ag-grid-ng2>
  `,

  ////////////////////////////////////
  // Problem at this line
  ////////////////////////////////////
  directives: [ag.grid.AgGridNg2]

})
export class Cars {

  private columnDefs: Object[];
  private rowData: Object[];

  constructor(service: CarsService) {
    this.columnDefs = [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }
    ];

    service.getCars().subscribe(
    (res: Response) => {
      this.rowData = res.json();
      //console.log(this.rowData);
      // TODO: Refresh table
    });
  }
}

我是否必须导入 AgGridNg2 以及如何做？或者可能当前版本的 Angular2 Beta 已损坏？

【问题讨论】：

这是由 Angular 更新引起的。使用 Angular beta.0 版本，不要使用缩小的 Angular beta.1 版本。此代码形式 plunker 已过时，请尝试查找更新版本或重写。

标签： typescript angular ag-grid

【解决方案1】：

我看了你的 plunkr。在测试版中，angular2/angular2 现在是 angular2/core。

也就是说，您似乎没有正确初始化 ag-grid。你应该尝试这样的事情：

ag.grid.initialiseAgGridWithAngular2({ core: core });

bootstrap(App, [
    HTTP_BINDINGS,
    ROUTER_BINDINGS,
    bind(ROUTER_PRIMARY_COMPONENT).toValue(App),
    bind(LocationStrategy).toClass(HashLocationStrategy)
]);

并从您的 index.html 文件中删除此块：

System.import("angular2/angular2").then(function(ng2) {
  ag.grid.initialiseAgGridWithAngular2(ng2);
});

以下是使用 TypeScript 的 ag-grid 示例：https://github.com/helix46/ag-grid-angular2-beta-ts。这是有关配置的文件：https://github.com/helix46/ag-grid-angular2-beta-ts/blob/master/src/boot.ts.

希望对你有帮助，蒂埃里

【讨论】：