Блог

Я использую PrimeNG и Angular 2 для создания веб-приложения, отображающего таблицу данных. Пока это работает хорошо, однако я хочу иметь выпадающий компонент внутри ячейки данных, что означает, что в соответствии с шаблоном p-столбец должен включать другой p-выпадающий элемент следующим образом:

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

В соответствующем столбце ничего не отображается, даже если я добавлю только простой текст вместо выпадающего списка, он не появится.

Я что-то пропустил или это просто примечание, предусмотренное для этого?

Вам нужно указать значение <template> под p-столбцом, например, так, согласно документации PrimeNG datatable:

Шаблон внутри столбца должен быть оформлен директивой pTemplate вместе со свойством type, чтобы указать, к чему относится шаблон. Возможными значениями являются «верхний», «основной» и «нижний колонтитул».

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