Angular 12 HTML中如何通过点路径绑定JSON对应的字段？

问题根因 #

data[field]会将完整的address.city字符串当做单层属性名读取，你的data对象下不存在名为address.city的顶级属性，因此返回undefined。

实现方案 #

方案1：轻量工具函数实现（推荐，无额外封装成本） #

在组件类中新增按点路径存取值的两个工具方法：

@Component({
  // 你的组件原有配置
})
export class YourComponent {
  data: any = { name: 'x1', address: { city: 'xyz' } };
  field: string = 'address.city';

  // 按点路径取值
  private getByPath(obj: any, path: string): any {
    return path.split('.').reduce((current, key) => current?.[key], obj);
  }

  // 按点路径赋值
  private setByPath(obj: any, path: string, value: any): void {
    const keyArr = path.split('.');
    const finalKey = keyArr.pop()!;
    // 定位到最后一级属性的父对象
    const parentObj = keyArr.reduce((current, key) => current[key], obj);
    parentObj[finalKey] = value;
  }
}

模板中将双向绑定拆分为输入绑定和变更事件绑定即可：

<input 
  [ngModel]="getByPath(data, field)" 
  (ngModelChange)="setByPath(data, field, $event)"
/>

方案2：全局复用封装 #

如果项目中大量存在该场景，可以将存取逻辑封装为自定义指令，使用时直接传入路径即可，示例用法如下：

<input [(ngModelPath)]="{target: data, path: field}" />

注意事项 #

可以在getByPath、setByPath中增加非法路径的校验逻辑，避免中间层级属性不存在时抛出运行时错误。

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