Как использовать шаблон в PrimeNG datatable

Question

У меня есть очень простой вопрос, на который я не могу ответить сам, потому что большинство ссылок на http://www.primefaces.org/primeng больше не работают. Я также пробовал зарегистрироваться на их форуме, но их активационная почта никогда не прибывает.

Я использую Angular2 и имею datatable с двумя столбцами: имя файла и статус. Столбец статуса, который я хочу изменить. Теперь он содержит число от 1 до 4, и я хочу показать глификон, основанный на статусе.

теперь у меня есть это, который работает:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" sortField="Status" [sortOrder]="-1"> 
    <p-column field="FileName" header="Naam" sortable="true"></p-column> 
    <p-column field="Status" header="Status" sortable="true"></p-column> 
</p-dataTable> 

Я попробовал это, просто чтобы проверить шаблонный, но ничего не меняется:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" sortField="Status" [sortOrder]="-1"> 
    <p-column field="FileName" header="Naam" sortable="true"></p-column> 
    <p-column field="Status" header="Status" sortable="true"> 
    <template let-file="rowData"> 
     {{file.Status == 1 ? "Yes" : "No"}} 
    </template> 
    </p-column> 
</p-dataTable> 

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

Мы используем PrimeNG 1.0.0-beta.16

Answer 1

Каждый p-column может иметь два шаблона - body и header, вы должны указать, какой он есть. Это не обязательно, потому что body по умолчанию я думаю, и это то, что вам нужно в этом случае, но это хорошая практика. Вы также должны добавить pTemplate в шаблон для p-column, чтобы использовать его, вот почему p-column не отобразит шаблон, который вы предоставили. Итак, ваш код должен выглядеть так:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" sortField="Status" [sortOrder]="-1"> 
    <p-column field="FileName" header="Naam" sortable="true"></p-column> 
    <p-column field="Status" header="Status" sortable="true"> 
    <ng-template let-file="rowData" pTemplate type="body"> 
     {{file.Status == 1 ? "Yes" : "No"}} 
    </ng-template> 
    </p-column> 
</p-dataTable>