将下拉组件添加到数据列 table

Question

我使用 PrimeNG 和 Angular 2 构建显示数据的 Web 应用程序 table。到目前为止效果很好，但是我想在数据单元格中有一个下拉组件，这意味着 p-column 应该包含另一个 p-dropdown 元素的模板，如下所示：

<p-dataTable [value]="dataColumns" [(selection)]="selectedInputColumns">
        <header>Specify Input Columns</header>
        <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
        <p-column field="label" header="Column Name"></p-column>\n\
        <p-column header="Column Type">
           <p-dropdown [options]="dataColumns" [(ngModel)]="selectedDmuColumn"></p-dropdown> 
        </p-column>
</p-dataTable>

相应的列不显示任何内容，即使我只放一个简单的文本而不是下拉列表，它也不会显示。

我是否漏掉了任何东西，或者只是注意到了它的存在？

Answer 1

您需要在 p 列下方指定 <template>，如下所示，根据 PrimeNg 数据表文档：

A template inside a column must be decorated with pTemplate directive along with the type property to indicate where the template belongs to. Possible values are "header", "body" and "footer".

<p-column header="Column Type">
    <template pTemplate type="header">
       <p-dropdown [options]="dataColumns" [(ngModel)]="selectedDmuColumn"></p-dropdown> 
    </template>
</p-column>

将下拉组件添加到数据列 table

Add dropdown component to a column of data table

angular

primeng