Angular：订阅Observable时，AgGrid将不会更新行

本文介绍了Angular：订阅Observable时，AgGrid将不会更新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试将rxjs和observables合并到ag网格中。作为练习，我遵循一个官方的ag网格示例： www.ag -grid/javascript-grid-rxjs/

我当前正在使用Angular6。我将js文件更改为ts文件，并适当的更改。我也没有在索引文件中包含任何脚本。每当我调用脚本时，都会遇到一堆MIME错误。所以我将代码转换为严格的角度。我相信这就是造成我问题的原因。 我的目标是让随机行更改其值，而无需在观察到我的更新时刷新网页

在下面的代码中，您将看到基本上有一个间隔函数，该函数选择要显示的随机数。当我运行代码时，所有数据都将加载到我的网格中，但不会刷新或更新。我订阅了可观察到的updates $以输出更新的数据，但是什么也没有发生。这是代码。 onGridReady 函数正在订阅可观察项。

Component.ts

从'@ angular / core'导入{Component，OnInit}; 从 ../app/model导入{Model}；从 rxjs导入 {Observable}；从 @ angular / common / http导入 {HttpClient}； 从'../app/mockServer'导入{MockServer} @Component（{选择器：'app-root'，模板：`< ag-grid-angular #agGrid style = width：1000px; height：1500px; id = myGrid [rowData] = rowData class = ag-theme-balham [columnDefs] = columnDefs [enableRangeSelection] = true [enableColResize] = true [deltaRowDataMode] = true [getRowNodeId] = getRowNodeId （gridReady）= onGridReady（$ event） >< / ag-grid-angular> `， styleUrls：['./appponent.css'] }）导出类AppComponent实现OnInit { private gridApi; private gridColumnApi; private rowData：any []; 私人栏位； private getRowNodeId; Constructor（）{ this.columnDefs = [ {标头名称：代码，字段：代码，宽度：70 }， { headerName：名称，字段： name，宽度：300 }， { headerName：出价，字段： bid，宽度：100， cellClass：单元格编号， valueFormatter：numberFormatter， cellRenderer： agAnimateShowChangeCellRenderer }， { headerName： Mid，栏位： mid，宽度：100， cellClass：单元格编号， valueFormatter：numberFormatter， cellRenderer： agAnimateShowChangeCellRenderer }， { headerName：询问，栏位：询问，宽度：100， cellClass：单元格编号， valueFormatter：numberFormatter， cellRenderer： agAnimateShowChangeCellRenderer }， { headerName： Volume， field： volume，宽度：80， cellClass：单元号， cellRenderer： agAnimateSlideCellRenderer } ]； this.getRowNodeId = data =>数据代码; } ngOnInit（）{ } onGridReady（params）{ this.gridApi = params.api ; this.gridColumnApi = params.columnApi; 让mockServer = new MockServer（）; const initialLoad $ = mockServer.initialLoad（）; const updates $ = mockServer.allDataUpdates（）; initialLoad $ .subscribe（rowData => { params.api.setRowData（rowData）; updates $ .subscribe（newRowData => params.api.setRowData（newRowData））; }）； } } 函数numberFormatter（params）{ if（typeof params.value === number）{ return params.value.toFixed（2）; } else { return params.value; } }

这是服务器类。它包含操作数据的功能。为简便起见，我仅列出无法正常工作的方法。 byRowupdates不能正常工作

byRowupdates（）{ return Observable.create （（observer）=> { const interval = setInterval（（）=> { let changes = []; //对数据进行一些模拟更改this.makeSomePriceChanges（changes）; this.makeSomeVolumeChanges（changes）; //observer.next(changes）; }，1000）; return（）=> clearInterval（interval）; }）; } //提供对某些行的随机数据更新 //仅提供所有行数据（某些行已更改） allDataUpdates（）{ return Observable.create（（observer）=> { const interval = setInterval（（）=> { let changes = []; //对数据进行一些模拟更改 this.makeSomePriceChanges（changes）; this.makeSomeVolumeChanges（changes）; //这次我们不在乎增量变化 //这次我们返回已更改其中行的完整数据集 //observer.next(_.cloneDeep(this.rowData））; }，1000）; return（）= > clearInterval（interval）; }）; } / * *剩下的代码可以创建或修改模拟数据 *理解示例的其余部分并不重要（即，示例的rxjs部分it） * / backfillData（rowData）{ //样本数据仅包含名称和代码，我们需要添加虚拟数字 rowData.forEach（（dataItem） => { //具有100到10,000之间的随机值 dataItem.volume = Math.floor（（Math.random（）* 10000）+ 100）; //具有中期随机数，从20到300 dataItem.mid =（Math.random（）* 300）+ 20; this.setBidAndAsk（dataItem）; }）； 返回rowData; } makeSomeVolumeChanges（changes）{ for（let i = 0; i< 10; i ++）{ //随机选择数据项 const索引= Math.floor（this.rowData.length * Math.random（））; const currentRowData = this.rowData [index]; //在-5到5之间改变一个值 const move =（Math.floor（10 * Math.random（）））-5; const newValue = currentRowData.volume +移动; currentRowData.volume = newValue; changes.push（currentRowData）; } } makeSomePriceChanges（changes）{ //随机更新某些行的数据 for（let i = 0; i <10; i ++）{ const index = Math.floor（this.rowData.length * Math.random（））; const currentRowData = this.rowData [index]; //在-1和2之间改变一个小数点后的值 const move =（Math.floor（30 * Math.random（）））/ 10-1; const newValue = currentRowData.mid +移动; currentRowData.mid = newValue; this.setBidAndAsk（currentRowData）; changes.push（currentRowData）; } } setBidAndAsk（dataItem）{ dataItem.bid = dataItem.mid * 0.98; dataItem.ask = dataItem.mid * 1.02; } }

我的网格在创建时已成功检索数据，但网格不会更新新值。我的索引文件中没有任何脚本。这两个课程正在完成所有工作。我对如何正确实现此示例感到非常困惑。谢谢！

解决方案

您期望对网格数据进行数据绑定，但这种方式无法正常工作。 要更新现有数据，您需要调用

rowNode.setData（data）

替换rowNode上的数据。完成后，网格将刷新显示的整个渲染行。

或

rowNode.setDataValue（colKey，value）

替换rowNode上指定列的数据。完成后，网格将仅刷新所需行上的渲染单元。

查看文档以获取更多详细信息

*可以通过数据绑定进行JFI更改，但您需要通过 node 并使用 node.data 进行操作，但我不建议您使用这种类型的数据更新。

I am trying to incorporate rxjs and observables into ag grid. For practice, I am following an official ag grid example: www.ag-grid/javascript-grid-rxjs/

I am currently using Angular 6. I changed the js file to be a ts file and made the appropriate changes. I also do not include any scripts in my index file. I was getting a bunch of MIME errors anytime I called a script. So I converted to code to strictly angular. I believe this is what is causing my issue. My goal is to have random rows change their values without having to refresh the web page when I subscribe to my updates observable

In the code below you will see there is basically an interval function that chooses random numbers to be displayed. When I run my code, All the data is loaded into my grid, but it does not refresh or update. I subscribe to the updates$ observable to output the updated data, but nothing happens. Here is the code. The onGridReady function is subscribing to the observable.

Component.ts

import { Component, OnInit } from '@angular/core'; import {Model} from '../app/model'; import {Observable} from 'rxjs'; import { HttpClient } from '@angular/common/http'; import {MockServer} from '../app/mockServer' @Component({ selector: 'app-root', template: `<ag-grid-angular #agGrid style="width: 1000px; height: 1500px;" id="myGrid" [rowData]="rowData" class="ag-theme-balham" [columnDefs]="columnDefs" [enableRangeSelection]="true" [enableColResize]="true" [deltaRowDataMode]="true" [getRowNodeId]="getRowNodeId" (gridReady)="onGridReady($event)" ></ag-grid-angular> ` , styleUrls: ['./appponent.css'] }) export class AppComponent implements OnInit{ private gridApi; private gridColumnApi; private rowData: any[]; private columnDefs; private getRowNodeId; constructor() { this.columnDefs = [ { headerName: "Code", field: "code", width: 70 }, { headerName: "Name", field: "name", width: 300 }, { headerName: "Bid", field: "bid", width: 100, cellClass: "cell-number", valueFormatter: numberFormatter, cellRenderer: "agAnimateShowChangeCellRenderer" }, { headerName: "Mid", field: "mid", width: 100, cellClass: "cell-number", valueFormatter: numberFormatter, cellRenderer: "agAnimateShowChangeCellRenderer" }, { headerName: "Ask", field: "ask", width: 100, cellClass: "cell-number", valueFormatter: numberFormatter, cellRenderer: "agAnimateShowChangeCellRenderer" }, { headerName: "Volume", field: "volume", width: 80, cellClass: "cell-number", cellRenderer: "agAnimateSlideCellRenderer" } ]; this.getRowNodeId = data => data.code; } ngOnInit() { } onGridReady(params) { this.gridApi = params.api; this.gridColumnApi = params.columnApi; let mockServer = new MockServer(); const initialLoad$ = mockServer.initialLoad(); const updates$ = mockServer.allDataUpdates(); initialLoad$.subscribe(rowData => { params.api.setRowData(rowData); updates$.subscribe(newRowData => params.api.setRowData(newRowData)); }); } } function numberFormatter(params) { if (typeof params.value === "number") { return params.value.toFixed(2); } else { return params.value; } }

Here is the server class. This contains the functions that manipulate the data. For brevity, I am only including the methods that are not working correctly. byRowupdates is what is not working properly

byRowupdates() { return Observable.create((observer) => { const interval = setInterval(() => { let changes = []; // make some mock changes to the data this.makeSomePriceChanges(changes); this.makeSomeVolumeChanges(changes); // observer.next(changes); }, 1000); return () => clearInterval(interval); }); } // provides randomised data updates to some of the rows // only all the row data (with some rows changed) allDataUpdates() { return Observable.create((observer) => { const interval = setInterval(() => { let changes = []; // make some mock changes to the data this.makeSomePriceChanges(changes); this.makeSomeVolumeChanges(changes); // this time we don't care about the delta changes only // this time we return the full data set which has changed rows within it //observer.next(_.cloneDeep(this.rowData)); }, 1000); return () => clearInterval(interval); }); } /* * The rest of the code exists to create or modify mock data * it is not important to understand the rest of the example (i.e. the rxjs part of it) */ backfillData(rowData) { // the sample data has just name and code, we need to add in dummy figures rowData.forEach((dataItem) => { // have volume a random between 100 and 10,000 dataItem.volume = Math.floor((Math.random() * 10000) + 100); // have mid random from 20 to 300 dataItem.mid = (Math.random() * 300) + 20; this.setBidAndAsk(dataItem); }); return rowData; } makeSomeVolumeChanges(changes) { for (let i = 0; i < 10; i++) { // pick a data item at random const index = Math.floor(this.rowData.length * Math.random()); const currentRowData = this.rowData[index]; // change by a value between -5 and 5 const move = (Math.floor(10 * Math.random())) - 5; const newValue = currentRowData.volume + move; currentRowData.volume = newValue; changes.push(currentRowData); } } makeSomePriceChanges(changes) { // randomly update data for some rows for (let i = 0; i < 10; i++) { const index = Math.floor(this.rowData.length * Math.random()); const currentRowData = this.rowData[index]; // change by a value between -1 and 2 with one decimal place const move = (Math.floor(30 * Math.random())) / 10 - 1; const newValue = currentRowData.mid + move; currentRowData.mid = newValue; this.setBidAndAsk(currentRowData); changes.push(currentRowData); } } setBidAndAsk(dataItem) { dataItem.bid = dataItem.mid * 0.98; dataItem.ask = dataItem.mid * 1.02; } }

My grid is successfully retrieving the data when it is created, but the grid is not updating new values. I do not have any scripts in my index file. These two classes are doing all the work. I am very confused on how to implement this example properly. Thank you!

解决方案

You are expecting data-binding for grid-data, but it doesn't work like that. For updating existing data you need to call

rowNode.setData(data)

Replaces the data on the rowNode. When complete, the grid will refresh the the entire rendered row if it is showing.

or

rowNode.setDataValue(colKey, value)

Replaces the data on the rowNode for the specified column. When complete, the grid will refresh the rendered cell on the required row only.

Check doc for more details

*JFI changes through data-binding possible but you would require to make it via node and manipulate with node.data but I'm not recommending using this type of data-update.