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

本文介绍了Angular：订阅Observable时，AgGrid将不会更新行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试将rxjs和observables合并到ag网格中。作为练习，我遵循一个官方的ag网格示例： https://www.ag -grid.com/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：['./app.component.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 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.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: https://www.ag-grid.com/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 observableIn 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.tsimport { 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: ['./app.component.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 properlybyRowupdates() { 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)orrowNode.setDataValue(colKey, value)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. 这篇关于Angular：订阅Observable时，AgGrid将不会更新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！