gpt4 book ai didi

javascript - AgGrid/Angular 2 : No access to setRowData(). 网格呈现,没有显示行数据

转载 作者:太空狗 更新时间:2023-10-29 17:58:36 24 4
gpt4 key购买 nike

已解决(某种程度上)我相信我的解决方案是偷偷摸摸的,表明我没有正确设置我的 Mongoose 模型。

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

即。在我的网格组件名称.component.ts

gridOptions.columnDef.field 

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

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



问题从这里开始....


我正在从 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, 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();
});
}
}

_______________________________________________________________________

====================== UPDATE per Dermo's advice ====================== _______________________________________________________________________

我仍然无法访问 setRowData 方法。

进行调整并添加 self 后。到你的一行代码,

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 中详细说明的任何方法。

_______________________________________________________________________

这里有一些更多的细节(希望相关。)

在更改任何代码之前,我在

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 does not compile: //Cannot find name 'gridApi' in the .ts

解决方法:

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

最佳答案

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

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

首先,更新您的模板以绑定(bind)到 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/

关于javascript - AgGrid/Angular 2 : No access to setRowData(). 网格呈现,没有显示行数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49748953/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com