Primeng Table 响应式布局堆栈/滚动不起作用

Question

我在我的 Angular 项目中使用 PrimeNG。我试图使表格元素在响应时以“堆栈”模式显示，根据文档，这应该是一件简单的事情。

但它在我的代码中不起作用，对于小屏幕尺寸，行不会堆叠：

这是我的

component.html

：

<div class="card">
  <p-table responsiveLayout="stack" [value]="questions">
    <ng-template pTemplate="caption">
      <h5 class="p-m-0">Trial Table</h5>
    </ng-template>

    <ng-template pTemplate="header" let-columns>
      <tr>
        <th pSortableColumn="main">Question <p-sortIcon field="main"></p-sortIcon></th>
        <th pSortableColumn="content">Content <p-sortIcon field="content"></p-sortIcon></th>
        <th pSortableColumn="timeToRead">Time To Read <p-sortIcon field="timeToRead"></p-sortIcon></th>
        <th pSortableColumn="timeToRecord">Time To Record <p-sortIcon field="timeToRecord"></p-sortIcon></th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-question let-columns="columns">
      <tr>
        <td><span class="p-column-title">Question</span>{{question.main}}</td>
        <td><span class="p-column-title">Content</span>{{question.content}}</td>
        <td><span class="p-column-title">Time To Read</span>{{question.timeToRead}}</td>
        <td><span class="p-column-title">Time To Record</span>{{question.timeToRecord}}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

这是我的

component.ts

的精简版本：

import { Component } from '@angular/core';

@Component({
  selector: 'app-questions',
  templateUrl: './questions.component.html',
})
export class QuestionsComponent {
  questions = [{ main: 'valueA', content: 'valueB', timeToRead: 'valueC', timeToRecord: 'valueD' }];
}

我的

package.json

：

{
  "name": "something",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/cdk": "^12.2.2",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.0.3",
    "@angular/localize": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "@types/video.js": "^7.3.19",
    "bootstrap": "^5.0.1",
    "color": "^3.1.3",
    "firebase": "^8.6.7",
    "ngx-papaparse": "^5.0.0",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primeng": "^12.0.0-rc.1",
    "reading-time": "^1.3.0",
    "recordrtc": "^5.6.2",
    "rxjs": "~6.6.0",
    "swiper": "^6.7.0",
    "tslib": "^2.1.0",
    "video.js": "^7.12.3",
    "videojs-record": "^4.5.0",
    "webrtc-adapter": "^8.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "^12.1.4",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/jest": "^26.0.23",
    "@types/mocha": "^8.2.2",
    "@types/node": "^12.20.15",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3"
  }
}

Answer 1

有一个属性 responsive 您可以绑定到它。 如果您将

[responsive]="true"

添加到

p-table

组件，它应该可以正常工作。

Answer 2

从 PrimeNg 版本 12.1.0 开始，您可以使用responsiveLayout =“stack”，在此之前有输入[responsive] =“true”

Answer 3

使用 primeNg 版本 17.4.0 和以下值：

...

并且不起作用，如果可滚动为假，则仅在其断点处出现堆栈布局...一些 primeng 组件在欺骗我，我覆盖了他们的很多 css 类以实现我想要的（是的，我之前尝试过使用文档，有些情况有效，有些则无效）。