如何通过其数据属性名称绑定表数据单元

Question

试图创建通用动态表取决于列的集合（数组）及其列的标题名称和数据的属性名称：

columns: Array<any>= [
 {title: 'first column', name: 'subItem.propertyName1'},
 {title: 'second column', name: 'subItem.propertyName2'}
];

这是数据结构的样子：

export class SubItem
{
   property1  :string;
   proeprty2 : string;
}

export class data 
{
   subItem : SubItem;
   AAA: string;
   BBBB:string;
}

这是表的数据

tableData : Array<data> = jsonDataConvertedToObjectsCollection

现在，在Html中，我希望基于列名属性在标题标签的列（不是问题）和单元格数据的数据项属性上进行迭代。我假设我可以以某种方式内联（选项1）或使用指令（尚未设置）或使用函数（选项2）来执行此操作。寻找一个可行的例子和最佳实践：

<table>
 <thead>
  <th *ngFor="let columnHeader of columns">
     {{columnHeader.title}}
 </th>
</thead>
<tbody>
 <tr *ngFor="let dataItem of tableData">
   <td *ngfor = "let column of columns">
      {{dataItem[column.name]}} // option 1 - Not working
      {{getCellValue(dataItem, column.name)}} //option 2 - not working
   </td>
 </tr>
</tbody>
</table>

这是功能：

getCellValue(dataItem : data, propertyName : string)
{
    return dataItem[propertyName]
}

Answer 1

您可以使用lodash get。https://lodash.com/docs/4.17.15#get