Frage: Ich versuche, die Höhe einer Primzahl-P-Tabelle im Winkel festzulegen. Ich habe viel online gesucht, aber bisher hat nichts funktioniert (wahrscheinlich aufgrund der Tatsache, dass dieses Problem schon seit Jahren besteht und einige Änderungen am Framework einige Lösungen deaktiviert haben).

Ich habe zwei Methoden ausprobiert, die erste ist im Code unten. Die zweite Möglichkeit besteht darin, die Höhe des übergeordneten Divs der P-Tabelle auf innerWindowHeight und die Bildlaufhöhe der P-Tabelle auf Flex festzulegen (funktioniert ebenfalls nicht).

Tools: Angular 14.2.0 und PrimeNG 14.1.1 in einem neuen Projekt

Ich habe den folgenden HTML-Code in app.component.html:

    Datum ID Beschreibung value Steuern    {{entry.date}} {{entry.id}} {{entry.description}} {{entry.value}} {{entry.tax}}    

und das folgende app.component.ts:

import {Component} from '@angular/core'; @Komponente({ Selektor: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) Klasse AppComponent { exportieren title = 'Testapp'; Daten: any[]; tableScrollHeight: string = "700px"; rowsPerPage: number[] = [5, 10, 20, 50]; Konstrukteur() { this.data = []; let-Eintrag: any = {}; enter.description = "Erster Eintrag"; this.data.push(entry); } onResize() { this.tableScrollHeight = window.innerHeight + 'px'; } }

Das Verhalten, das ich erreichen möchte: Ich möchte, dass der Paginator am unteren Rand des Fensters bleibt, unabhängig davon, ob die Tabelle leer ist oder nicht genügend Einträge vorhanden sind, um das Fenster zu füllen, und dass die Tabelle scrollbar ist (Kopfzeile bleibt oben), wenn die Tabellenzeilen größer sind als die Bildschirmgröße.

Um zu verdeutlichen, was ich erreichen möchte, ist hier ein Screenshot, der den aktuellen Status zeigt: Aktueller Status

Hier ist ein Screenshot, wie es aussehen soll: Wie es aussehen sollte

Frage: Gibt es eine Möglichkeit, dies auf saubere Weise zu erreichen?

Wie in den Kommentaren vorgeschlagen, habe ich einen stackblitz hinzugefügt: https://angular-ivy-sfk7pw.stackblitz.io

Herausgeber: Ich habe festgestellt, dass, wenn ich die scrollHeight der Tabelle auf einen div innerhalb der Tabelle (generiert von primeng) mit dem Klassennamen p-datatable-wrapper setze, Get Der Stil „max-height: XXXpx“, wobei XXX der Wert von tableScrollHeight ist. . Ich könnte einen CSS-Selektor schreiben, um den Stil auf „Mindestbreite“ zu ändern, aber das ist wahrscheinlich keine gute Idee, da ich über die Typoskriptdatei auf den Dom zugreifen und nach dem automatisch generierten Div suchen müsste.