如何在Angular Infragistics igx-grid组件中获取选中行数据

1. 优先修正取值API #

Infragistics的igx-grid组件中，selectedRows属性返回的是选中行的主键值数组，而非完整的行数据对象。如果需要获取选中行的完整数据，需要调用组件内置的getSelectedRows()方法，修改TS代码如下：

export class productComponnet implements OnInit {
  // 若grid不会被ngIf等动态控制渲染，添加static: true可更早拿到组件实例
  @ViewChild("grid", { static: true }) public grid!: IgxGridComponent;

  selected_rows() {
    // 调用API获取完整行数据
    console.log(this.grid.getSelectedRows());
    // 仅需要主键值时才使用this.grid.selectedRows
  }
}

2. 校验主键配置有效性 #

你在grid上声明了primaryKey="prID"，请确保数据源listeproduits的每一项都包含prID字段，且值全局唯一。如果主键字段缺失、重复或为空，会导致行选中逻辑异常，无法正确记录选中状态。

3. 确认调用时机 #

如果你在ngOnInit生命周期就调用selected_rows方法，此时grid组件还未完成渲染初始化，this.grid可能未加载完成数据。请在ngAfterViewInit生命周期之后调用方法，或者通过按钮点击触发selected_rows，此时组件实例已完成初始化。

4. 可选：简化rowSelection绑定写法 #

你当前的[rowSelection]='"multiple"'写法是正确的，也可以简化为无绑定写法避免引号嵌套出错：

<igx-grid 
  #grid id="grid" rowSelection="multiple"  primaryKey="prID" 
  rowHeight="35px" displayDensity="compact" [data]="listeproduits" 
  [autoGenerate]="false" height="380px" [allowFiltering]="true" >
  <igx-column  field="code"  header="Code"></igx-column>
  <igx-column  field="name"   header="name"></igx-column>
</igx-grid>

内容的提问来源于stack exchange，提问作者amilana