如何使 Angular Material 表响应式

Question

我有一个包含许多列的简单表格，我希望在调整浏览器窗口大小时自动缩小列。

table-responsive

可与 Bootstrap 配合使用，但我正在为 Angular Material 寻找类似的东西。我试图避免有 2 个表定义，并且不想自己在 CSS 中这样做。 Angular Material 中有为此的标准方法吗？

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" flex>
    <thead>
        <th class="mdl-data-table__cell--non-numeric">Date</th>
        <th class="mdl-data-table__cell--non-numeric">Time</th>
        <th class="mdl-data-table__cell--non-numeric">Park</th>
        <th class="mdl-data-table__cell--non-numeric">Home Team</th>
        <th class="mdl-data-table__cell--non-numeric">Away Team</th>
        <th class="mdl-data-table__cell--non-numeric">Win/Loss</th>
    </thead>
    <tbody>
        <tr ng-repeat="game in games">
            <td class="mdl-data-table__cell--non-numeric">{{game.GameDate | SLS_Date}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.GameTime | SLS_Time:'HH:mm' }}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.VenueName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.HomeTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.AwayTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.WinLoss}}</td>
        </tr>
    </tbody>
</table>

注意，我在这里使用了 Material Design Lite 表，因为 Angular Material 目前还没有表。同样的问题，包括使用 Flex 和网格。

我猜新的材质世界不喜欢表格，所以最好的选择是更改布局以不使用表格。

Answer 1

我创建了一个小指令，可以应用于

mat-table

表以使其响应。通过这种方式，可以很容易地仅向应用程序中的某些表添加响应行为（这是我的情况的要求）。

Angular 17（TS 严格模式）

Angular 12+（TS 严格模式）

Angular 12（无 TS 严格模式）

因此基本上该指令将每个标题单元格的内容（列名称）复制为数据属性，以便可以通过 CSS

content

属性访问它（受此 article 的启发）。不幸的是 CSS 样式不能应用于指令，因此需要全局导入样式。

特点

• 移动视图没有额外的硬编码列名称
• 对语言更改做出反应并更新移动视图的列名称
• 也会对行更改/更新做出反应（例如添加行）
• 在移动视图中，它仅显示通过

  matSort

  指令可排序的列

这不应被视为通用解决方案，因为它当然不能涵盖所有用例。此外，表格移动视图的样式与我的具体要求相关，可能需要调整。但我只是想分享它，这样它也许可以作为其他人的起点并提供帮助。

Answer 2

目前无法在 MDL 中实现此目的，请查看 github 上的 this 问题。

我的桌子也有同样的问题，但我想我必须让它们响应我自己。那里有很多教程，您应该做一些研究，哪种表格设计最适合您的响应式网站。

另外，我认为值得查看materializecss的响应表

Answer 3

一个简单的解决方案是用具有以下样式的

<div>

包裹您的桌子：

width: 100%;
overflow-x: auto;

Answer 4

不幸的是，这对我不起作用 - 我复制了指令文件，在我的应用程序模块中导入了 mat-table-responsive.module 。将 mat-table-responsive.module.scss 导入到 /styles.scss 并将 te 指令选择器添加到我的

元素中。 也更改了 te tsconfig 以包含 DOM.Iterable

。当我使用 te fdevtools nothonmig 更改切换到移动视图时购买 - 表格被切断
我想知道我的 Angular 材质版本是否与此有关？

将我的 mat-table 实现与 Stackblitz 中的实现进行比较，没有发现任何差异。

“@角度/核心”：“^16.2.0” “@角度/材料”：“^16.2.12”

缺少什么？