AgGrid/Angular 2：无法访问 setRowData()。网格渲染，不显示 rowData

Question

解决了（有点）我相信我的解决方案是杰瑞操纵的，并表明我不正确地设置了我的猫鼬模型。

下面的答案确实帮助我解决了我的问题，所以我检查了它，但最终空白数据行的原因是属性中的标识符不正确

IE。在 my-gridcomponent-name.component.ts 中

gridOptions.columnDef.field 

我需要使用实际的数据库字段名称/标识符设置字段属性。

我使用的是我在 mongoose Schema 中分配的名称/标识符，而不是数据库的实际字段名称/标识符。例如，模式标识符，其中所有一个单词都是小写，而数据库标识符以大写开头，并且单词之间可能有一个 _。

---

---

问题从这里开始......

---

我正在从 MongoDB 获取一组 JSON 对象，并希望在 agGrid 中显示它们。

$ng version angular-cli: 1.0.0-beta.28.3 node: 6.9.2 os: win32 x64 
@angular/common: 2.4.10 
@angular/compiler: 2.4.10 
@angular/core: 2.4.10 
@angular/forms: 2.4.10 
@angular/http: 2.4.10 
@angular/platform-browser: 2.4.10 
@angular/platform-browser-dynamic: 2.4.10 
@angular/router: 3.4.10 
@angular/compiler-cli: 2.4.10

我 99% 确定我有数组中的数据并且它可用于我的 html 页面。

1) console.log(Array.isArray(self.catalogue)) //true

2）我*ngFor在<ag-grid-angular>标签下方进行了测试。有效。

<div *ngFor='let note of catalogue'> 
    <li>{{note.Country}}</li> 
    <li>{{note.Authority}}</li> ......etc 
</div>

这篇文章有一个我的 agGrid 的截图——它有标题和滚动条，就好像数据是用隐形墨水打印的。 UI Grid Angular，网格呈现但不显示数据

如果我只是在构造函数中硬编码一些对象，则 rowData 将显示。

constructor(private catalogueService: CatalogueService) {
 this.gridOptions = <GridOptions>{},
 this.gridOptions.columnDefs = [
 {
  headerName: "Country",
  field: "country",
  width: 200
},.....
]    
this.gridOptions.rowData = [
  {country: 'pig', authority: 'A12', banknoteID: 'bn1', pickID: 'p1', currency: 'thalers', denomination: 10},   
  ]
}

这是我的 .html 文件

<div style="width: 1000px;">
  <ag-grid-angular #agGrid style="width: 100%; height: 200px;" 
    class="ag-fresh"
    [gridOptions]="gridOptions"
    [rowData]="catalogue">
  </ag-grid-angular>
</div>

我的 .ts 文件

import { Component, OnInit } from '@angular/core';
import { CatalogueService } from '../services/catalogue.service';
import { Catalogue } from '../models/Catalogue';
import { GridOptions } from 'ag-grid';

@Component({
  selector: 'app-ag-grid-catalogue',
  templateUrl: './ag-grid-catalogue.component.html',
  styleUrls: ['./ag-grid-catalogue.component.css']
})

export class AgGridCatalogueComponent implements OnInit {

private gridOptions: GridOptions;
private catalogue: Catalogue [];

constructor(private catalogueService: CatalogueService) {
   this.gridOptions = <GridOptions>{},
   this.gridOptions.columnDefs = [
    {
      headerName: "Country",
      field: "country",
      width: 200
    },....etc
  ]

   this.gridOptions.rowData = [ ]
  }
 //Methods
 loadCatalogue () {
   //Assign this to self to be used in callbacks
   var self = this;
     return this.catalogueService.getCatalogue().subscribe(function (data) {
        //Why can't I use dot notation to access the data param?
        //console.log(data) ==> {success: true, catalogue: Array(4)}
        if (data['success']) {
        //Bind "catalogue" to the [rowData] in the <ag-grid-angular> tag
        self.catalogue = data['catalogue']
        // tried and failed:self.gridOptions.rowData = data['catalogue'];          
        // return data['catalogue'];
       };
     })
    };

    ngOnInit () {
       this.loadCatalogue();
    };
   } 

这是服务，但似乎我得到了一组 JSON 对象，所以我认为问题不在服务中

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';

@Injectable()
export class CatalogueService {

constructor(private http: Http) { }

private serverApi= 'http://localhost:3000';

public getCatalogue():Observable <Object> {
  // let headers = new Headers();
  // headers.append('Content-type', 'application/json');
  let URI = `${this.serverApi}` + `/`;
    return this.http.get(URI)
      .map(function (res) {
         return res.json();
      });
    }
  }

_______________________________________________________________________

======================每真皮的意见UPDATE ====================== _______________________________________________________________________

我仍然无法访问 setRowData 方法。

在进行调整并添加自我之后。到你的一行代码，

self.gridApi.setRowData(self.catalogue);

浏览器中的控制台显示：

//error_handler.js:54异常：无法读取未定义的属性“setRowData”

交换上面的代码行：

self.gridOptions.api.setRowData(self.catalogue)

ng serve 编译，浏览器控制台没有错误，但是...行数据仍然没有显示。

请注意，在 this.gridOptions.rowData = [{blah, blah,...]} 中使用硬编码数组时，网格会呈现该硬编码数据，但很快该数据会被擦除并且网格中都是空行。

看来我的 gridOptions 对象和 gridApi 对象都没有 setRowData 方法。单击浏览器控制台中显示的对象时，我是否应该看到该方法。我没有看到您链接的 api.docs 中详细介绍的任何方法。

_______________________________________________________________________

这里有一些更多细节（希望相关。）

在更改任何代码之前，我运行了带有 console.log 的程序

loadCatalogue () {
//Assign this to self to be used in callbacks
var self = this;

return this.catalogueService.getCatalogue().subscribe(function (data) {
  if (data['success']) {        
      self.catalogue = data['catalogue']
      console.log('in cb', self)
    };
  })
};

console.log(self):
AgGridCatalogueComponent {catalogueService: CatalogueService, gridOptions: {…}, catalogue: Array(15)}
catalogue:        (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
catalogueService: CatalogueService {http: Http, serverApi: "http://localhost:3000"}
gridOptions:      { columnDefs: Array(11), 
                    rowData: Array(15), //(has the array of JSON objects I expected!)
                    api: GridApi,   //(with a list of properties/methods - as stated in the origainal question there is NO setRowData method)
                    columnApi: ColumnApi
                  }
__proto__:    Object

所以，就像你说的，问题似乎是 .html 上的网格在 rowData 属性被赋值之前呈现。

根据您的建议，我将 4 个项目添加到程序中：

在 .html 中

(gridReady)="onGridReady($event)"

在.ts

private gridApi;

gridApi.setRowData(self.catalogue);

onGridReady(params) {
  this.gridApi = params.api;
};

$ng serve 无法编译：//在 .ts 文件中找不到名称“gridApi”

解决方案：

self.gridApi.setRowData(self.catalogue);  //Added the self. to the line of code

$ng serve 现在可以编译了，但是...

浏览器中的控制台读取 //error_handler.js:54异常：无法读取未定义的属性“setRowData”

console.log(self):
Has one additional property: (due to the onGridReady(params) {this.gridApi = params.api;};????

gridApi:    GridApi {detailGridInfoMap: {…}, immutableService: ImmutableService, csvCreator: CsvCreator, excelCreator: null, gridCore: GridCore, …}

Answer 1

问题是 ag-grid 已使用空数组初始化。您可以通过多种方式解决这个问题。

• 一种选择是在加载组件之前检索目录数据。
• 第二个选项（详见下文）是使用 ag-grid api 来设置/更新
  网格数据。

首先，更新模板以绑定到 gridReady 事件

<div style="width: 1000px;">
  <ag-grid-angular #agGrid style="width: 100%; height: 200px;" 
    class="ag-fresh"
    [gridOptions]="gridOptions"
    [rowData]="catalogue"
    (gridReady)="onGridReady($event)">
  </ag-grid-angular>
</div>

现在将 onGridReady 函数添加到您的 .ts 中，并添加对网格 api 的引用。然后在 loadCatalogue 中设置数据行

import { Component, OnInit } from '@angular/core';
import { CatalogueService } from '../services/catalogue.service';
import { Catalogue } from '../models/Catalogue';
import { GridOptions } from 'ag-grid';

@Component({
  selector: 'app-ag-grid-catalogue',
  templateUrl: './ag-grid-catalogue.component.html',
  styleUrls: ['./ag-grid-catalogue.component.css']
})

export class AgGridCatalogueComponent implements OnInit {

private gridOptions: GridOptions;
private catalogue: Catalogue [];
private gridApi;

constructor(private catalogueService: CatalogueService) {
   this.gridOptions = <GridOptions>{},
   this.gridOptions.columnDefs = [
    {
      headerName: "Country",
      field: "country",
      width: 200
    },....etc
  ]

   this.gridOptions.rowData = [ ]
  }
 //Methods
 loadCatalogue () {
   //Assign this to self to be used in callbacks
   var self = this;
     return this.catalogueService.getCatalogue().subscribe(function (data) {
        //Why can't I use dot notation to access the data param?
        //console.log(data) ==> {success: true, catalogue: Array(4)}
        if (data['success']) {
        //Bind "catalogue" to the [rowData] in the <ag-grid-angular> tag
        self.catalogue = data['catalogue'];
        gridApi.setRowData(self.catalogue);
        // tried and failed:self.gridOptions.rowData = data['catalogue'];          
        // return data['catalogue'];
       };
     })
    };

    ngOnInit () {
       this.loadCatalogue();
    };

    onGridReady(params) {
      this.gridApi = params.api;
    };
   }

更新网格数据：https://www.ag-grid.com/javascript-grid-data-update/

访问 api/数据：https://www.ag-grid.com/javascript-grid-accessing-data/