如何在角度6中选择和取消选择行

Question

我想从选定的行中获取值并将其存储在一个数组中。当我取消选择一行时，我想将其从结果数组中删除。但是根据我的代码，我点击了多少次行值中的文件名多次添加到我的结果数组（selectedRows）中。我的代码是：

HTML：

<ag-grid-angular #grid
      style="width : 603px; height:250px;" class="ag-theme-balham"
      [rowData]="searchResults" [columnDefs]="columnDefs" [rowSelection]="selectionMode"
      [rowMultiSelectWithClick] = true
      (rowClicked)="onRowClicked($event)"
    >
    </ag-grid-angular>

component.ts:

    export class ShowFilesComponent implements OnInit {
            searchResults : Array<String>;
            private seletectedRows :Array<String>;

            columnDefs  = [
                {headerName:"S No", valueGetter: (args) => this.getIndexValue(),checkboxSelection : true,headerCheckboxSelection: true,
                headerCheckboxSelectionFilteredOnly: true,cellRenderer: 'selectedClient'}, 
                {headerName : 'File Name', field:'fileName', sortable:true},
                {headerName : 'word count', field:'wordCount', sortable:true}
              ]
            constructor(private http: HttpClient,private r : Router, private s : FileListService) {
                this.http.get(this.path).subscribe(
                  (data: any) => {
                    this.searchResults = data;
                    console.log(this.searchResults);
                  },
                  error => console.log(error)
                );

               }
            }
            ngOnInit() {}
             onRowClicked(event){
            this.seletectedRows.push(event.node.data.fileName);

                console.log(this.seletectedRows);
}
        }

Answer 1

像这样使用 Array.prototype.push 方法：

onRowClicked(event){
    let temp = 0;
    this.seletectedRows.push(event.node.data.fileName);
    console.log(this.seletectedRows);
}

并在取消选择时使用 splice 方法。我确定您的表格/网格组件有一些取消选择事件，您可以使用它来实现从数组中删除元素。

Answer 2

为了收听该行的selection/de-selection，您需要注册onRowSelected事件。

以下是来自ag-grid-angular论坛的示例代码，您可以在此基础上构建您的逻辑（以下数据仅用于演示目的）

角度代码：

var gridOptions = {
  columnDefs: columnDefs,
  rowSelection: 'multiple', // to enable multiple row selection by click
  rowMultiSelectWithClick: true,
  rowData: null,
  onRowSelected: onRowSelected // register to rowSelection event
};

function onRowSelected(event) {
     alert("row " + event.node.data.athlete + " selected = " + event.node.selected); // only for debugging purpose
     if(event.node.selected) {
         this.seletectedRows.push(event.node.data.athlete);
     } else {
       const index = this.seletectedRows.indexOf(event.node.data.athlete);
       if(index != -1) {
          this.seletectedRows.splice(index, 1);
       }
     }
}

Working example on plunkr

Answer 3

向网格注册一个selectionChanged 处理程序，并在您的处理程序中使用网格API 的getSelectedNodes() 方法。

<ag-grid-angular #grid
      [rowData]="searchResults" [columnDefs]="columnDefs" [rowSelection]="selectionMode"
      [rowMultiSelectWithClick]=true
      (selectionChanged)="onSelectionChanged($event)" >
</ag-grid-angular>

事件对象将具有对网格 api 的引用，您可以使用它来获取选定的行...

onSelectionChanged(event: AgGridEvent) {
  const nodes = event.api.getSelectedNodes();
  // now do something with them....
}

请注意，您不需要自己将节点存储在数组中 - 只需使用 ag-grid 的副本，该副本将为您保持最新，然后您可以使用 Array.map() 获取数组从节点的数据中获取任何你想要的东西。