Pテーブルの高さをウィンドウの高さと同じになるように調整する方法

Question

<p>質問: </strong> プライム P テーブルの高さを角度で設定しようとしています。オンラインでたくさん検索しましたが、これまでのところ何もうまくいきません（おそらく、この問題は何年も前から存在しており、フレームワークへのいくつかの変更により一部の解決策が無効になっているためです）。 </p> <p>2 つの方法を試しました。最初の方法は以下のコードにあります。 2 番目の方法は、p テーブルの親 div の高さを innerWindowHeight に設定し、p テーブルのスクロール高さを flex に設定することです (これも機能しません)。 </p> <p>ツール: 新しいプロジェクトの Angular 14.2.0 および PrimeNG 14.1.1

<p><strong>app.component.html</strong> には次の HTML コードがあります: </p> <pre class="brush:php;toolbar:false;"><div> <p-テーブル #テーブル (ウィンドウ:サイズ変更)=「onResize()」 [値] = "データ" [ページネータ] = "true" [showCurrentPageReport]="true" [スクロール可能] = "true" [スクロール高さ]=「テーブルスクロール高さ」 [行]=「10」 [ページごとの行数オプション]=「ページごとの行数」 styleClass="p-datatable-gridlines p-datatable-striped p-datatable-sm" currentPageReportTemplate="{totalRecords} レコードの {first} から {last} まで"> <tr> 日付 ID <th>説明</th> 値 税金 </tr> </ng-template> <ng-template pTemplate="body" let-entry> <tr> <td>{{entry.date}}</td> <td>{{entry.id}}</td> <td>{{entry.description}}</td> <td>{{entry.value}}</td> <td>{{entry.tax}}</td> </tr> </ng-template> </p-テーブル> </div></pre> <p>および次の<strong>app.component.ts</strong>: </p> <pre class="brush:php;toolbar:false;">import {Component} from '@angular/core'; @成分（{ セレクター: 'アプリルート', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) エクスポート クラス AppComponent { タイトル = 'テストアプリ'; データ: 任意[]; tableScrollHeight: 文字列 = "700px"; ページあたりの行数: 数値[] = [5, 10, 20, 50]; コンストラクター() { this.data = []; エントリ: 任意 = {}; entry.description = "最初のエントリ"; this.data.push(エントリ); } onResize() { this.tableScrollHeight = window.innerHeight 'px'; } }</pre> <p>達成したい動作: </strong> テーブルが空か、ウィンドウを埋めるのに十分なエントリがないかに関係なく、ページネータをウィンドウの下部に配置し、テーブルの行が大きい場合にテーブルをスクロール可能（ヘッダーを上部に配置）にしたいと考えています。画面サイズ。 </p> <p>何を達成しようとしているのかを明確にするために、現在の状態を示すスクリーンショットを次に示します。 現在のステータス</p> <p>これがどのように見えるかのスクリーンショットです: どのように見えるべきか</p> <p>質問: </strong> これをクリーンな方法で達成する方法はありますか? </p> <p>コメントで提案されているように、<strong>stackblitz</strong> を追加しました: https://angular-ivy-sfk7pw.stackblitz.io</p> <p>編集者: </strong> クラス名 <strong>p-datatable-wrapper</strong> を持つテーブル (primeng によって生成された) 内の <strong>div</strong> にテーブルのscrollHeight を設定すると、Get されることがわかりました。スタイル「<strong>max-height</strong>: <strong>XXX</strong>px」、ここで <strong>XXX</strong> は <strong>tableScrollHeight</strong> の値です。 。 CSS セレクターを作成してスタイルを min-width に変更することもできますが、typscript ファイルから dom にアクセスして自動生成された div を検索する必要があるため、おそらくそれは良い考えではありません。 </p>

Answer 1

このスタイルを css/scss に追加してみることもできますが、それはベスト プラクティスではありません。

リーリー

注: 100vh は画面の高さ、90px はページングの高さの例です。

＃＃＃それでおしまい。お役に立てば幸いです。