PrimeNGの公式サイトで検索したところ、PrimeNG ref . http://www.primefaces.org/primeng/#/datatable のデータテーブルにemptyMessage= "No Record Found"
のような属性がないことがわかりました。 ==
したがって、データテーブルにデータがない場合、メッセージは表示されません。
<p-dataTable #datatable [value]="jobData" [rows]="20" [paginator]="true"
[responsive]="true" selectionMode="single"><--emptyMessage="" not working here as attribute :(
<p-column expander="true" styleClass="icon"></p-column>
<p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)">
<p-column field="state" styleClass="status" header="Status" sortable="custom" (sortFunction)="sort($event)">
</p-column>
</p-dataTable>
ドキュメントによると、DataTableには実際にそのようなタグはありません。私は同じ問題/質問をしました。そして、DataTableの代わりに表示する2番目の要素を作成することでそれを解決しました。したがって、*ngIf="jobData.length==0"
のような条件を追加します。
例えば:
<p-dataTable #datatable [value]="jobData" [rows]="20" [paginator]="true"
[responsive]="true" selectionMode="single" *ngIf="jobData.length>0">
<p-column expander="true" styleClass="icon"></p-column>
<p-column field="finOrVin" styleClass="vinfin" header="header" sortable="custom" (sortFunction)="sort($event)"></p-column>
<p-column field="state" styleClass="status" header="Status" sortable="custom" (sortFunction)="sort($event)"></p-column>
</p-dataTable>
<div *ngIf="jobData.length==0">
No values to display here
</div>
このための機能リクエストを追加できますか?私の場合、「ここに表示する値はありません」オプションの方が実際には優れています。これは、データリストのヘッダーがないためです。タグを使用すると、おそらくヘッダーが表示されます。
次のコードを使用して、ng-template pTemplate="body"
タグの後に配置します。
<ng-template pTemplate="emptymessage" let-columns>
<tr>
<td [attr.colspan]="columns.length">
No records found
</td>
</tr>
</ng-template>
公式ドキュメント によると、これはテンプレートとして利用できるようになりました。
データがない場合、DataTableはemptyMessageプロパティを使用して定義されたメッセージテキストを表示しますが、カスタムコンテンツはemptymessageテンプレートを使用して提供できます。
<p-dataTable [value]="cars" [responsive]="true">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
<ng-template pTemplate="emptymessage">
Custom content goes here
</ng-template>
</p-dataTable>
Datatableは、この属性に対して文字列型の変数を取ります。
<p-dataTable ... [emptyMessage]="myVariable" ...>
そして、コントローラーは文字列を変数に入れます(つまり、ngx-translateを使用します)。
class ... {
public myVariable;
ngOnInit() {
this.translateService.get('MY_TRANSLATION').subscribe(
(translationString) => {
this.myVariable = translationString;
}
);
...
}
EDIT:テンプレートで直接実行するソリューションに出くわしました。 (属性の角かっこは省略してください):
emptyMessage="{{ 'MY_TRANSLATION' | translate }}"