如何在PrimeNG数据表中使用模板

Pau*_*ems 8 datatable angular2-template primeng angular

我有一个非常基本的问题,我无法自己回答,因为大多数指向http://www.primefaces.org/primeng的链接都不再适用.我也尝试注册他们的论坛,但他们的激活邮件永远不会到来.

我使用Angular2并拥有一个包含两列的数据表:filename和status.我想要更改的状态列.它现在拥有1到4的数字,我想根据状态显示一个glyphicon.

我现在有这个,这是有效的:

<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>
Run Code Online (Sandbox Code Playgroud)

我试过这个,只是为了测试模板,但没有任何变化:

<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>
Run Code Online (Sandbox Code Playgroud)

所以除了得出结论我没有正确使用它.

我们正在使用PrimeNG 1.0.0-beta.16

Ste*_*ota 19

每个都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>
Run Code Online (Sandbox Code Playgroud)

  • 不建议使用类型属性定义pTemplate,而是使用pTemplate ="type".在此示例中,使用pTemplate ="body" (3认同)