如何使 Angular Material 表具有响应性

Question

我有一个包含许多列的简单表格，我希望在调整浏览器窗口大小时自动缩小列。在table-responsive与引导工作，但我在寻找一个角材质类似的东西。我试图避免有 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 和网格。

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

Answer 1

我创建了一个小指令，可以应用于mat-table表格以使其具有响应性。这样很容易只向应用程序中的某些表添加响应行为（这在我的情况下是必需的）。

所以基本上该指令将每个标题单元格（列名）的内容复制为数据属性，以便可以通过 CSScontent属性访问它（受本文启发）。不幸的是，CSS 样式不能应用于指令，因此需要全局导入样式。

特征

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

闪电战

这不应被视为通用解决方案，因为它当然不会涵盖所有用例。此外，table mobile 视图的样式与我的特定要求有关，可能需要调整。但我只是想分享它，以便它可以作为其他人的起点。

TS 严格模式

由于用户klaydze的评论中的请求，这里有一个替代版本，支持strict: true在tsconfig.json.

Stackblitz 使用 TS 严格模式