Angular中通过TS字符串属性路径动态获取模板属性值的问题

API 探路者

2026-7-2

问题解决步骤

1. 修正数据结构的语法错误

你的dataExample数组定义存在语法问题，数组元素不能用user: {...}的形式，正确写法如下：

this.dataExample = {
  users: [{ firstName: 'John', lastName: 'Doe' }]
};

2. 修正模板的对象遍历方式

gridData是对象，*ngFor无法直接遍历对象，需要使用Angular内置的keyvalue管道将其转换为键值对数组：

<ng-container *ngFor="let entry of gridData | keyvalue">
  <td class="table-cell">{{ dataExample | propertyPath: entry.value.templatePath }}</td>
</ng-container>

3. 实现正确的自定义属性路径管道

你之前尝试的管道可能没有正确解析包含数组索引的路径，比如users.user[0].firstName需要拆分处理数组索引和属性名。以下是可用的管道实现：

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

@Pipe({ name: 'propertyPath' })
export class PropertyPathPipe implements PipeTransform {
  transform(obj: any, path: string): any {
    if (!obj || !path) return null;
    // 拆分路径片段，过滤空字符串
    const segments = path.split(/[\.\[\]]/).filter(seg => seg.trim() !== '');
    // 链式访问属性/数组索引
    return segments.reduce((current, seg) => {
      const index = parseInt(seg, 10);
      return current && !isNaN(index) ? current[index] : current?.[seg];
    }, obj);
  }
}

4. 注册管道

在你的Angular模块（比如AppModule）中，将该管道加入declarations数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PropertyPathPipe } from './property-path.pipe'; // 替换为你的管道路径
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, PropertyPathPipe],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }