Jak korzystać z szablonu w PrimeNG datatable

Question

Mam bardzo podstawowe pytanie, na które nie mogę odpowiedzieć, ponieważ większość linków do http://www.primefaces.org/primeng już nie działa. Próbowałem także zarejestrować się na ich forum, ale ich poczta aktywacyjna nigdy nie dotarła.

Używam Angular2 i mam datatable z dwiema kolumnami: filename i status. Kolumna stanu, którą chcę zmienić. Posiada teraz liczbę od 1 do 4 i chcę pokazać glify na podstawie statusu.

Mam teraz ten, który pracuje:

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

Próbowałem to, żeby przetestować templating ale nic się nie zmienia:

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

więc zaoszczędzić do zawarcia Nie mam go przy użyciu prawidłowo.

Używamy PrimeNG 1.0.0-beta.16

Answer 1

Każdy p-column może mieć dwa szablony - body i header, należy określić, który z nich jest. Nie jest to obowiązkowe, ponieważ domyślnie domyślnie jest to body i właśnie to jest potrzebne w tym przypadku, ale jest to dobra praktyka. Musisz również dodać pTemplate do szablonu, aby móc go używać p-column. Z tego powodu p-column nie wyświetli podanego szablonu. Twój kod powinien wyglądać tak:

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