剑道网格排序图标消失(角9)

Question

我有我的项目开发的角9，我正在使用的最新版本的剑道网格。在网格中，已启用排序和调整大小列。当我使用localhost访问应用程序时，一切都很好。但是当我把它部署到服务器上时，排序图标就消失了。当我调整尺寸时，它会出现并在悬停时消失。有线索吗？

Answer 1

我也有过类似的问题。我尝试了许多不同的方法在不同的角度应用程序中重现这个问题，这样我们就可以与Telerik共享我们的源代码。具有相同源代码的小型应用程序总是工作得很好。无可指责的是Telerik支持社区，但我不能分享我的原始应用程序代码。

我在下面尝试了多个选项。

source

• Creating是一个单独的应用程序，具有与我们在应用程序

• 中相同的网格源代码，它在一个单独的application

• Downgrading/上应用了一个类似的设置，用于棱角、包、多填充、浏览器列表、tsconfig.app & tsconfig.es5，以不同的方式升级角versions.

• Rewriting my网格。

我放弃了这个bug &我正在使用下面的CSS解决方案。

搜索-grid.Component.scss

 .k-icon {
  height: 1em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-family: 'WebComponentsIcons';
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  speak: none;
  text-transform: none;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

.k-i-sort-asc-sm, .k-i-sort-desc-sm {
  margin-left: calc(1rem - 1px);
}

.k-i-sort-asc-sm::before {
  content: '\e127';
}

.k-i-sort-desc-sm::before {
  content: '\e128';
}

kendo-grid th[aria-sort='ascending'] span span[aria-label='Sortable'] {
  @extend #{'.k-icon', '.k-i-sort-asc-sm'};
}
kendo-grid th[aria-sort='descending'] span span[aria-label='Sortable'] {
  @extend #{'.k-icon', '.k-i-sort-desc-sm'};
}

，因为您正在更新kendo网格样式，所以组件的封装设置为

ViewEncapsulation.None

实例

@Component({
  selector: 'app-search-grid',
  templateUrl: './search-grid.component.html',
  styleUrls: ['./search-grid.component.scss'],
  encapsulation: ViewEncapsulation.None,
})