【发布时间】：2018-09-19 19:07:48
【问题描述】：
已解决（有点） 我相信我的解决方案是杰里操纵的，表明我不正确地设置了我的猫鼬模型。
下面的答案确实帮助我解决了我的问题，所以我检查了一下，但最后空白数据行的原因是属性中的标识符不正确
即。在 my-gridcomponent-name.component.ts
gridOptions.columnDef.field
我需要使用实际的数据库字段名称/标识符设置字段属性。
我使用的是我在猫鼬模式中分配的名称/标识符，而不是数据库的实际字段名称/标识符。例如，所有一个单词都小写的模式标识符，而数据库标识符以大写开头并且单词之间可能有一个 _。
问题从这里开始......
我正在从 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) 我在<ag-grid-angular> 标签下方测试了*ngFor。有效。
<div *ngFor='let note of catalogue'>
<li>{{note.Country}}</li>
<li>{{note.Authority}}</li> ......etc
</div>
这篇文章有一个我的 agGrid 基本外观的屏幕截图——它有标题和滚动条，就好像数据是用隐形墨水打印的一样。 UI Grid Angular, grid renders but doesn't display data
如果我只是在构造函数中硬编码一些对象，就会显示 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();
});
}
}
_______________________________________________________________________
====================== 根据 Dermo 的建议更新 ================= ==== _____________________________________________________________
我仍然无法访问 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 服务 不编译：//在 .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, …}
【问题讨论】：
-
请分享您的代码。
-
删除你所有的 cmets，编辑你的帖子并把你的代码放在那里。
-
没有人会回答你的问题，因为没有人想阅读评论中的代码。
-
天哪：D。我说了什么:(
-
是的，我明白了。我很感激你的时间。编辑不让我发帖。一直给我关于糟糕格式的错误
标签： javascript angular ag-grid