函数 rowSelected 已被调用两次（选中和取消选中）

Posted 2023-03-28

【中文标题】函数 rowSelected 已被调用两次（选中和取消选中）

【英文标题】：Function rowSelected has been called twice(selected and deselected)

【发布时间】：2020-03-21 23:58:15

【问题描述】：

我有一个带有 Ag-Grid 的网格并且工作得很好，但我需要将事件单击放在具有某些特定条件（错误条件回调）的行上。所以当第一次点击行时正常工作 但第二次以后得到最后一次值和当前值，所以打印当前值。更改顺序。

我的模板文件：

<!-- <button (click)="setDataValue()">rowNode.setDataValue</button> -->
<ag-grid-angular
#agGrid
style="width: 100%; height: 450px;"
class="ag-theme-material"
(gridReady)="onGridReady($event)"
(rowSelected)="onRowSelected($event)" // ----------The FUNCTION----------
[rowData]="rowData"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[modules]="modules"
[pagination]="true"
[paginationPageSize]="paginationPageSize"
[pagination]="true"
[domLayout]="domLayout"
[rowHeight]="rowHeight"
[overlayLoadingTemplate]="overlayLoadingTemplate"
[overlayNoRowsTemplate]="overlayNoRowsTemplate"
[rowSelection]="rowSelection"
>
</ag-grid-angular>
 <div #anchorErrorMessage class="container">
  <div
   [hidden]="!rowErrorMessage"
   class="alert alert-danger"
   role="alert"
  >
 <h4 class="alert-heading">Erro de inconsistência!</h4>
 <hr />
 <ul>
   <li *ngFor="let error of rowErrorMessage">
       error 
   </li>
  </ul>
 </div>
</div>

我的 .ts 文件

onRowSelected(event) 
  console.log(event.node.data.erros);

  this.rowErrorMessage = '';
  this.rowErrorMessage = event.node.data.erros;

  setTimeout(() => 
    this.anchorErrorMessage.nativeElement.scrollIntoView( behavior: 'smooth' );
  , 20);

我的日志：

所以每次我点击获取 2 个值。请帮助我。

【参考方案1】：

我明白了。我的问题是这个事件：

(rowSelection)="onRowSelected(event)"

调用两个方法，selected和deselected，所以我只是放了一个条件来做 选择我想要的任何内容。

https://www.ag-grid.com/javascript-grid-events/#reference-selection

【参考方案2】：

你说得对，令人讨厌的是，agGrid 调用了“onRowSelected”事件两次，一次用于被选中的行，一次用于未选择的行。

（第二个事件真的应该单独提供，在一个名为“onRowUnselected”的事件下。）

此外，event.type 值两次都设置为“rowSelected”（叹气），因此您实际上需要注意 event.node.selected 值。

因此，要运行一些代码，仅基于选中的行，您可以使用：

  onRowSelected(event) 
      if (!event.node.selected)
          return;

      let id = event.node.data.YourPrimaryKeyField;
      console.log('Selected row: ' + id);
      . . . 
  

为什么 agGrid 文档没有提到这个重要的 event.node.selected 值？！

https://www.ag-grid.com/javascript-grid-events/#selection