как связать ячейку данных таблицы по имени свойства данных - PullRequest
Новая
       20

как связать ячейку данных таблицы по имени свойства данных

1 голос
/ 09 января 2020

Попытка создания обобщенной c dynamici c таблицы зависит от коллекции (массива) столбцов с их заголовком и именем свойства для данных: 

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

1 Ответ

1 голос
/ 09 января 2020

Вы можете использовать loda sh get. https://lodash.com/docs/4.17.15#get

Создать канал для доступа к объекту, который использует функцию loda sh 

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