Question

我试图让一些表格列只显示在某些屏幕尺寸上，根据布局选项＆＃39; Show＆amp;隐藏＆＃39;第here部分

我codepen显示了我想要实现的目标，没有任何惊天动地，非常简单（无论如何我都这么认为）

代码段：

<tr layout="row">
    <th flex="10" hide show-gt-sm>Status</th>
    <th flex="10" hide show-gt-md>Value</th>
    <th flex="10" hide show-gt-md>Type</th>
    <th flex="20" hide show-gt-sm>Action</th>
    <th flex="10" hide show-gt-md>Card Number</th>
    <th flex>Customer</th>
    <th flex>Contact</th>
</tr>

但无论屏幕尺寸如何，它们都会显示出来。

我错过了什么吗？

Answer 1

经过一些测试，我发现此问题是由您使用的版本引起的。如您所说，您不能升级版本，但是降级呢？

    {
      "name": "qgnirxral.github",
      "version": "0.0.0",
      "private": true,
      "dependencies": {
        "@angular/animations": "~9.1.9",
        "@angular/cdk": "~9.2.4",
        "@angular/common": "~9.1.9",
        "@angular/compiler": "~9.1.9",
        "@angular/core": "^9.1.9",
        "@angular/forms": "~9.1.9",
        "@angular/platform-browser": "~9.1.9",
        "@angular/platform-browser-dynamic": "~9.1.9",
        "@angular/router": "~9.1.9",
        "@fullcalendar/core": "4.4.0",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "primeflex": "^1.1.1",
        "primeicons": "^2.0.0",
        "primeng": "9.0.6",
        "quill": "^1.3.7",
        "rxjs": "^6.6.3",
        "rxjs-compat": "^6.6.3",
        "tslib": "^1.13.0",
        "web-animations-js": "2.3.2",
        "zone.js": "0.10.2"
      },
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.901.7",
        "@angular/cli": "^9.1.7",
        "@angular/compiler-cli": "~9.1.9",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^5.0.9",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "^3.0.3",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "protractor": "~5.4.2",
        "ts-node": "~8.0.2",
        "tslint": "~5.12.1",
        "typescript": "~3.8.3"
      }
    }

我已将软件包版本降级为9.0.6，并且效果很好。

这是您修改后的示例

https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering-ok5cvp?file=src/app/app.component.html

我希望您可以降级并解决该问题，直到可以将其更新到最新版本为止。

Angular-Material：在1.0版中使用布局属性

1 个答案: