Angular中如何获取数组索引并传递至图标userGuid属性？

方案1：利用组件自带的索引参数 #

多数表格类组件的单元格渲染函数，会将当前行的索引作为第三个参数传入。你可以直接修改view函数的参数列表来获取索引：

{
  header: 'Edit',
  field: 'id',
  view: (value: string, obj: any, index: number) => { 
    return `<i class='material-icons' style='cursor: pointer;font-size: 20px;margin-left: 10px;'
     aria-hidden='false' aria-label='Example edit icon' userGuid=${index}>edit</i>`; 
  }
}

方案2：手动给数组元素添加索引字段 #

如果组件不支持直接传入索引，可以在渲染表格前，给数组的每一项新增索引字段：

// 假设你的原始数据数组是originalData
const dataWithIndex = originalData.map((item, idx) => ({
  ...item,
  rowIndex: idx
}));

之后在view函数里，通过obj.rowIndex就能拿到索引值：

{
  header: 'Edit',
  field: 'id',
  view: (value: string, obj: any) => { 
    return `<i class='material-icons' style='cursor: pointer;font-size: 20px;margin-left: 10px;'
     aria-hidden='false' aria-label='Example edit icon' userGuid=${obj.rowIndex}>edit</i>`; 
  }
}

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