时间戳

首页 > 解决方案 > 如何在角度6中选择和取消选择行

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

问题描述

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

组件.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);
}
        }

标签： angulartypescriptag-grid-angular

解决方案

向网格注册一个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() 获取任何您想要的数组从节点的数据。

推荐阅读