Angular中通过JSON属性路径动态访问多层级对象属性的问题

你当前的代码无法访问深层属性，是因为row[col.properties]会把col.properties的字符串（比如"levels.name"）当作单个键去查找，而你的对象里并没有名为"levels.name"的属性，自然返回undefined。

针对通用组件层级不固定的场景，推荐使用Angular管道来实现动态属性路径解析：

1. 创建属性访问管道 #

在项目中新建一个管道文件（比如property-accessor.pipe.ts）：

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

@Pipe({
  name: 'propertyAccessor'
})
export class PropertyAccessorPipe implements PipeTransform {
  transform(obj: any, path: string): any {
    if (!obj || !path) return undefined;
    // 将路径按点分割为层级数组
    const segments = path.split('.');
    // 逐层遍历对象属性，可选链避免报错
    return segments.reduce((currentObj, key) => {
      return currentObj?.[key];
    }, obj);
  }
}

2. 在模块中注册管道 #

在组件所属的NgModule中声明该管道：

import { NgModule } from '@angular/core';
import { PropertyAccessorPipe } from './property-accessor.pipe';
// 导入你的组件等其他内容

@NgModule({
  declarations: [
    // 你的组件
    PropertyAccessorPipe
  ],
  // 其他模块配置
})
export class YourComponentModule { }

3. 在模板中使用管道 #

修改你的HTML代码，用管道解析属性路径：

<div *ngFor="let row of rows ">
  <div *ngFor="let col of columns">
    {{ row | propertyAccessor: col.properties }}
  </div>
</div>

这样就能正确渲染出所有层级的属性值，最终结果会是：

Row1
name1
thing1
Row2
name2
thing2

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