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

Question

尝试执行通用动态 table 取决于 collection（数组）列及其 header 名称和属性数据名称：

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

这是 table

的数据

tableData : Array<data> = jsonDataConvertedToObjectsCollection

现在，在 Html 中，我想在 header 标签的列（不是问题）和基于列的单元格数据的数据项属性上进行迭代名称属性。我假设我可以以某种方式内联（选项 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

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

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

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

how to bind table data cell by its data property name

data-binding

angular-directive

angular

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

how to bind table data cell by its data property name

data-binding

angular-directive

angular

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