如何在TypeScript中动态访问JSON元素？Angular网格如何动态获取主键？

这俩问题本质都是动态访问对象属性的事儿，咱们一个个说：

1. TypeScript中动态访问JSON元素的方法 #

在TypeScript里，JSON解析后就是普通的JavaScript对象，所以动态访问属性完全可以用方括号语法（点语法只能用于固定的属性名，没法用变量）。举几个实用的例子：

基础用法 #

如果已经有一个对象和存储属性名的变量，直接用变量作为方括号里的键就行：

// 解析JSON得到对象
const userJson = '{"name": "Alice", "age": 30}';
const user = JSON.parse(userJson);

// 动态指定属性名
const propKey = 'name';
console.log(user[propKey]); // 输出 "Alice"

类型安全写法 #

如果想要更严谨的类型检查，可以用keyof关键字约束属性名的范围，避免访问不存在的属性：

// 定义对象的类型接口
interface User {
  name: string;
  age: number;
}

const user: User = { name: "Bob", age: 25 };
// 限定propKey只能是User接口里的属性
const propKey: keyof User = 'age';

console.log(user[propKey]); // 输出 25

2. Angular中动态访问数据行主键的实现方案 #

当然可行！你只需要把原来固定的点语法（ddata.discountauthorizationid）换成方括号语法，用你定义的primaryid输入属性作为键就行，具体修改如下：

第一步：修改HTML模板 #

把原来判断选中行的ddata.discountauthorizationid == selectedRow改成ddata[primaryid] == selectedRow（模板里可以直接用输入属性primaryid），另外注意你原来的let i = ddata应该是笔误，改成let i = index才对：

<tbody>
  <tr 
    *ngFor="let ddata of tableData.data; let i = index" 
    (click)="setClickedRow(ddata)" 
    [class.active]="ddata[primaryid] == selectedRow"
  >
    <td *ngFor="let dr of tableData.record | paginate: { itemsPerPage: pageItem, currentPage: p }">
      {{ddata[dr]}}
    </td>
  </tr>
</tbody>

第二步：修改组件.ts代码 #

在setClickedRow方法里，把固定的属性访问换成动态的ddata[this.primaryid]：

setClickedRow(ddata: any) {
  this.selectedRow = ddata[this.primaryid];
  console.log("You selected!", ddata[this.primaryid]);
  this.dataService.changeMessage(ddata[this.primaryid]);
}

进阶：类型安全优化 #

如果你的表格数据有对应的类型接口，建议把primaryid的类型改成keyof 你的数据接口，这样编译期就能检查传入的主键名是否合法，避免出错：

// 先定义表格数据的接口
interface TableDataItem {
  discountauthorizationid: number;
  // 其他属性...
}

// 把primaryid的类型约束为TableDataItem的属性之一
@Input() primaryid: keyof TableDataItem;

内容的提问来源于stack exchange，提问作者Code is Cheap Show me The Talk