web-dev-qa-db-ja.com

<p-datatable>でテンプレートを使用する方法

http://www.primefaces.org/primeng へのほとんどのリンクが機能しなくなったため、自分には答えられない非常に基本的な質問があります。私も彼らのフォーラムに登録しようとしましたが、彼らのアクティベーションメールは届きません。

私はAngular2を使用し、ファイル名とステータスの2つの列を持つデータテーブルを持っています。変更したいステータス列。現在は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を使用しています

angulardatatableangular2-templateprimeng
8
Paul Meems

各p-columnには、bodyとheaderの2つのテンプレートを含めることができます。どちらかを指定する必要があります。 bodyがデフォルトだと思うので、これは必須ではありません。これはこの場合に必要なものですが、良い習慣です。 p-columnを使用するには、テンプレートにpTemplateを追加する必要もあります。これが、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>
18
Stefan Svrkota