angularjs - 如何使 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 和网格。

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

Answer 1

我创建了一个小指令，可以应用于 mat-table表以使其响应。这样很容易只向应用程序中的某些表添加响应行为(这在我的情况下是必需的)。
所以基本上该指令将每个标题单元格(列名)的内容复制为数据属性，以便可以通过 CSS content 访问它。属性(property)(受此启发 article)。不幸的是，CSS 样式不能应用于指令，因此需要全局导入样式。
特点

移动 View 没有额外的硬编码列名

对语言更改使用react并更新移动 View 的列名称

也会对行更改/更新使用react(例如添加一行)

在移动 View 中，它只显示通过 matSort 排序的列。指令

Stackblitz
这不应被视为通用解决方案，因为它当然不会涵盖所有用例。此外，table mobile View 的样式与我的特定要求有关，可能需要调整。但我只是想分享它，以便它可以作为其他人的起点。
TS 严格模式
由于用户klaydze在评论中的要求，这里有一个支持使用要求的替代版本 strict: true在 tsconfig.json .
Stackblitz using TS strict mode