問題: Primep-table の高さを angular で設定しようとしています。オンラインでたくさん検索しましたが、これまでのところ何もうまくいきません（おそらく、この問題は何年も前から存在しており、フレームワークへのいくつかの変更により一部の解決策が無効になっているためです）。 2 つの方法を試しました。1 つ目は以下のコードにあります。 2 番目の方法は、P テーブルの親 div の高さを innerWindowHeight に設定し、P テーブルのスクロールハイトを flex に設定することです (同様に

このスタイルを css/scss に追加してみることもできますが、それはベストプラクティスではありません。リーリー注: 100vh は画面の高さ、 90px はページングの高さの例です。＃＃＃それでおしまい。お役に立てば幸いです。

Pテーブルの高さをウィンドウの高さと同じになるように調整する方法-PHP中国語ネットワークQ&A

質問: プライム P テーブルの高さを角度で設定しようとしています。オンラインでたくさん検索しましたが、これまでのところ何もうまくいきません（おそらく、この問題は何年も前から存在しており、フレームワークへのいくつかの変更により一部の解決策が無効になっているためです）。 2 つの方法を試しました。最初の方法は以下のコードにあります。 2 番目の方法は、p テーブルの親 div の高さを innerWindowHeight に設定し、p テーブルのスクロール高さを flex に設定することです (これも機能しません)。 ツール: 新しいプロジェクトの Angular 14.2.0 および PrimeNG 14.1.1
app.component.html には次の HTML コードがあります: <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> および次のapp.component.ts: <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> 達成したい動作: テーブルが空か、ウィンドウを埋めるのに十分なエントリがないかに関係なく、ページネータをウィンドウの下部に配置し、テーブルの行が大きい場合にテーブルをスクロール可能（ヘッダーを上部に配置）にしたいと考えています。画面サイズ。 何を達成しようとしているのかを明確にするために、現在の状態を示すスクリーンショットを次に示します。現在のステータス これがどのように見えるかのスクリーンショットです: どのように見えるべきか 質問: これをクリーンな方法で達成する方法はありますか? コメントで提案されているように、stackblitz を追加しました: https://angular-ivy-sfk7pw.stackblitz.io 編集者: クラス名 p-datatable-wrapper を持つテーブル (primeng によって生成された) 内の div にテーブルのscrollHeight を設定すると、Get されることがわかりました。スタイル「max-height: XXXpx」、ここで XXX は tableScrollHeight の値です。。 CSS セレクターを作成してスタイルを min-width に変更することもできますが、typscript ファイルから dom にアクセスして自動生成された div を検索する必要があるため、おそらくそれは良い考えではありません。