如何在Angular的ngModel中绑定动态嵌套键？（PrimeNG场景）

你的问题在于rowData[col.field]无法解析variables.code这种嵌套路径——它会把整个字符串当作单个属性名去查找，而非逐层访问嵌套对象。下面是两种可行的实现方式：

方法一：使用自定义管道 #

创建一个支持读写操作的管道，适配ngModel的双向绑定需求：

1. 编写嵌套属性管道 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'nestedProperty' })
export class NestedPropertyPipe implements PipeTransform {
  transform(obj: any, path: string, value?: any): any {
    const keys = path.split('.');
    let current = obj;

    // 处理ngModel的赋值操作
    if (value !== undefined) {
      for (let i = 0; i < keys.length - 1; i++) {
        if (!current[keys[i]]) current[keys[i]] = {};
        current = current[keys[i]];
      }
      current[keys[keys.length - 1]] = value;
      return obj;
    }

    // 处理ngModel的取值操作
    for (const key of keys) {
      if (!current) return undefined;
      current = current[key];
    }
    return current;
  }
}

2. 注册管道 #

将这个管道添加到你的Angular模块的declarations数组中，确保模板可以调用它。

3. 修改HTML模板 #

用管道替换原有的绑定写法：

<p-table [columns]="cols" [value]="data">
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <input type="text" pInputText 
          [(ngModel)]="rowData | nestedProperty:col.field"/>
      </td>
    </tr>
  </ng-template>
</p-table>

方法二：使用组件内工具函数 #

如果不想创建管道，可以在组件内实现读写嵌套属性的方法：

1. 组件内添加工具方法 #

// 获取嵌套属性值
getNestedValue(obj: any, path: string): any {
  return path.split('.').reduce((current, key) => current?.[key], obj);
}

// 设置嵌套属性值
setNestedValue(obj: any, path: string, value: any): void {
  const keys = path.split('.');
  let current = obj;
  for (let i = 0; i < keys.length - 1; i++) {
    if (!current[keys[i]]) current[keys[i]] = {};
    current = current[keys[i]];
  }
  current[keys[keys.length - 1]] = value;
}

2. 修改HTML模板 #

通过[ngModel]和(ngModelChange)手动实现双向绑定：

<p-table [columns]="cols" [value]="data">
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <input type="text" pInputText 
          [ngModel]="getNestedValue(rowData, col.field)"
          (ngModelChange)="setNestedValue(rowData, col.field, $event)"/>
      </td>
    </tr>
  </ng-template>
</p-table>

两种方法都能解决你的问题：管道方式更通用，适合多组件复用；工具函数方式更轻量，适合单个组件内使用。

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