如何通过数据属性名称绑定表格数据单元格答案

【问题标题】：how to bind table data cell by its data property name如何通过数据属性名称绑定表格数据单元格
【发布时间】：2020-04-26 22:13:56
【问题描述】：

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

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]
}

【问题讨论】：

标签： angular data-binding angular-directive

【解决方案1】：

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

为使用lodash函数的对象访问创建管道

<tr *ngFor="let dataItem of tableData">
   <td *ngfor = "let column of columns">
      {{ dataItem | getCellValue:column.name }}
   </td>
 </tr>

【讨论】：