在列级别使用带有附加字段的数据表答案

【问题标题】：Use data table with additional fields on column level在列级别使用带有附加字段的数据表
【发布时间】：2016-10-19 16:07:14
【问题描述】：

我将 PrimeNG beta 17 与 Angular 2 一起使用，并在我的模板中使用如下数据表：

<p-dataTable [value]="dataColumns" [(selection)]="selectedInputColumns">
      <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
      <p-column field="label" header="Column name"></p-column>
      <p-column header="Column Type">
          <template pTemplate type="body">
                <p-selectButton [options]="availableColumnTypes" [(ngModel)]="selectedColumnType"></p-selectButton>
              </template>
      </p-column>
 </p-dataTable>

在数据表的一列（标题“列类型”）中，我想要一个额外的选择按钮（用户可以在三种状态之间进行选择），因此我们每个表行都有一个额外的信息。

PrimeNG 的 Select Button 组件提供 onChange 事件，一旦用户更改值就会引发。我的问题是在事件处理中是否可以获得点击数据表的哪一行的信息，因为我需要存储每个表行的附加信息。

【问题讨论】：

标签： angular primeng

【解决方案1】：

@Emdee，

请在下面找到我的建议：

我认为你需要一个 listBox 而不是 selectButton
您可以使用 rowData 获取<template> 内的当前行数据

更新模板：

<p-dataTable [value]="dataColumns" [(selection)]="selectedInputColumns">
      <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
      <p-column field="label" header="Column name"></p-column>
      <p-column header="Column Type">
          <template let-rdata="rowData" let-rindex="rowIndex" pTemplate type="body">
                {{ rdata }} {{ rindex }} <!-- current row-data is obtainable at rdata and index at rindex -->
                <p-listbox [options]="availableColumnTypes" [(ngModel)]="selectedColumnType"></p-listbox>
              </template>
      </p-column>
 </p-dataTable>

请尝试一下，如果它有效，请告诉我。

【讨论】：