질문: 각도로 프라임 p 테이블의 높이를 설정하려고합니다. 나는 온라인에서 많은 것을 검색했지만 지금까지 아무 것도 작동하지 않았습니다(아마도 이 문제가 수년 동안 지속되어 왔으며 프레임워크에 대한 일부 변경으로 인해 일부 솔루션이 비활성화되었기 때문일 것입니다).

두 가지 방법을 시도했는데 첫 번째 방법은 아래 코드에 있습니다. 두 번째 방법은 p-테이블의 상위 div 높이를 innerWindowHeight로 설정하고 p-테이블의 스크롤 높이를 flex로 설정하는 것입니다(역시 작동하지 않음).

도구: 새 프로젝트의 Angular 14.2.0 및 PrimeNG 14.1.1

app.comComponent.html에 다음 HTML 코드가 있습니다.

    <일>날짜
      <번째>
       ID
       <번째>
        설명
        <번째>
         값
         <번째>
          세금    {{entry.date}} {{entry.id}} {{entry.description}} {{entry.value}} {{entry.tax}}    

그리고 다음 app.comComponent.ts:

'@angular/core'에서 {Component} 가져오기; @요소({ 선택기: 'app-root', templateUrl: './app.comComponent.html', styleUrls: ['./app.comComponent.css'] }) 내보내기 클래스 AppComponent { 제목 = '테스트앱'; 데이터: 모두[]; tableScrollHeight: 문자열 = "700px";; RowPerPage: 숫자[] = [5, 10, 20, 50]; 생성자() { this.data = []; 항목 허용: any = {}; Entry.description = "첫 번째 항목";; this.data.push(항목); } onResize() { this.tableScrollHeight = window.innerHeight + 'px'; } }

달성하고 싶은 행동: 테이블이 비어 있는지 또는 창을 채울 만큼 충분한 항목이 있는지 여부에 관계없이 페이지네이터가 창 아래쪽에 머물기를 원하며, 테이블 행이 테이블 행보다 클 때 테이블이 스크롤 가능하도록(헤더가 맨 위에 유지되도록) 원합니다. 화면 크기.

제가 달성하려는 목표를 명확히 하기 위해 현재 상태를 보여주는 스크린샷은 다음과 같습니다. 현재 상황

다음은 제가 원하는 모습에 대한 스크린샷입니다. 어떻게 보여야 할까요

질문: 이것을 깨끗한 방법으로 달성할 수 있는 방법이 있습니까?

댓글에서 제안한 대로 stackblitz를 추가했습니다: https://angular-ivy-sfk7pw.stackblitz.io

편집자: 테이블의 scrollHeight를 클래스 이름이 p-datatable-wrapper인 테이블 내부의 div로 설정하면 스타일 "max-height: XXXpx", 여기서 XXX는 tableScrollHeight . 스타일을 최소 너비로 변경하기 위해 CSS 선택기를 작성할 수 있지만 typscript 파일에서 dom에 액세스하고 자동 생성된 div를 검색해야 하기 때문에 이는 아마도 좋은 생각이 아닐 것입니다.