Question

我正在使用Angular CDK table（没有Angular Material2），并希望使用bootstrap table design来设置样式。

可以向CDK表添加类，但bootsstrap规则直接解决html表元素tr，td，...而Angular CDK使用自定义标记cdk-table ，cdk-row，cdk-cell ...

作为快速而肮脏的解决方案，我使用来自bootstrap源的大量复制粘贴为cdk元素编写了自己的规则。但是，是否有一个很好的，可能更具前瞻性的解决方案来自动继承CDK表的引导规则？

Answer 1

我使用sass版本的bootstrap并为cdk-table添加以下样式，效果很好：

                [{
                        "id": 319,
                        "owner": 830,
                        "name": "new items22",
                        "date_added": "2017-10-05 22:12:59",
                        "last_modified": null,
                        "schedule": 54,
                        "day_index": 0,
                        "day": "Sunday",
                        "type": null,
                        "open": null,
                        "close": null,
                        "special": "closed"
                    },
                    {
                        "id": 320,
                        "owner": 830,
                        "name": "another ITEM",
                        "date_added": "2017-10-05 22:12:59",
                        "last_modified": null,
                        "schedule": 54,
                        "day_index": 1,
                        "day": "Monday",
                        "type": null,
                        "open": "09:00:00",
                        "close": "17:00:00",
                        "special": "open"
                    }]

Answer 2

我不相信有。 Cdk表实际上不是表元素。

Answer 3

您可以覆盖样式：.cdk-column -...列名称... {...}。这是css类将最后插入cdk-header-cell ...

Answer 4

我能够获得一个cdk表来使用bootstrap 4，而没有任何麻烦。假设您已安装引导程序，请在.component.scss文件中添加：

@import "~/bootstrap/scss/bootstrap"

您也可以将其添加到styles.scss文件中以使其具有全局性。

然后在.component.html中：

<table [datasource]="someDatasource" cdk-table class="table table-bordered">
...
</table>

使用angular-cdk表和bootstrap 4

4 个答案: