web-dev-qa-db-ja.com

PrimeNG Datatableに「NoRecordFound」を追加する方法データがない場合はどうすればよいですか？

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>
angularprimeng
7
Sarvesh Yadav

ドキュメントによると、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>

このための機能リクエストを追加できますか？私の場合、「ここに表示する値はありません」オプションの方が実際には優れています。これは、データリストのヘッダーがないためです。タグを使用すると、おそらくヘッダーが表示されます。

4
ndsmyter

次のコードを使用して、ng-template pTemplate="body"タグの後に配置します。

<ng-template pTemplate="emptymessage" let-columns>
  <tr>
    <td [attr.colspan]="columns.length">
       No records found
    </td>
  </tr>
</ng-template>
12
jupiter zhuo

公式ドキュメント によると、これはテンプレートとして利用できるようになりました。

データがない場合、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>
8
Gallonallen

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 }}"
7
Guntram

コントローラを使用して、よりエレガントでスタイリッシュなソリューションを見つけました。最初のフィールドが「データが見つかりません」に設定された「偽の」レコードをデータソース配列にプッシュします。これは、テーブル内に表示され、白い線で上書きされないためです。テーブル自体（添付の写真を参照）。

NG Template vs. Fake Record Solution

0
luca