Html datatable寻呼机的“下一步”按钮和“上一步”按钮不工作

我在我的项目中实现了一个ngx datatable，我正在为这个表做一个自定义的页脚，但是要从表中更改页面的“下一步”按钮和“后退”按钮图像不会显示在页脚中

首先：跟随下面的图片，你会看到下一步和后退按钮的图片不会出现

在页脚中，我将图像设置为如下示例：

<datatable-pager
  [pagerLeftArrowIcon]="'datatable-icon-left'"
  [pagerRightArrowIcon]="'datatable-icon-right'"
  [pagerPreviousIcon]="'datatable-icon-prev'"
  [pagerNextIcon]="'datatable-icon-skip'"
  [page]="curPage"
  [size]="pageSize"
  [count]="rowCount"
  [hidden]="!((rowCount / pageSize) > 1)"
  (change)="table.onFooterPage($event)">
</datatable-pager>

此图标在我的项目中的以下路径src/scss/partials/ngx-scss/table.scss中可用

查看下面表示datatable页脚样式的代码：

.datatable-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 16px;
  .page-count {
    line-height: 50px;
    height: 50px;
    padding: 0 1.2rem;
  }
  .datatable-pager {
    margin: 0 10px;
    li {
      vertical-align: middle;
      &.disabled a {
      color: rgba(0, 0, 0, 0.26) !important;
      background-color: transparent !important;
    }
    &.active a {
     background-color: $color-blue;
     color: #fff;
    }
  }
  a {
   padding: 0 6px;
   border-radius: 3px;
   margin: 6px 3px;
   text-align: center;
   vertical-align: top;
   color: rgba(0, 0, 0, 0.54);
   text-decoration: none;
   vertical-align: bottom;
   &:hover {
     color: rgba(0, 0, 0, 0.75);
     background-color: rgba(158, 158, 158, 0.2);
   }
 }
  .datatable-icon-left, .datatable-icon-skip, .datatable-icon-right, 
  .datatable-icon-prev {
     font-size: 20px;
    line-height: 20px;
    padding: 0 3px;
  }
 }
}

.datatable-icon-right:before {
  content: "\eb27";
  font-family: 'icofont';
  font-style: normal;
 }

 .datatable-icon-skip:before {
   content: "\eb3a";
   font-family: 'icofont';
   font-style: normal;
}

 .datatable-icon-left:before {
   content: "\eb26";
   font-family: 'icofont';
   font-style: normal;
 }

 .datatable-icon-down:before {
   content: "\eb28";
   font-family: 'icofont';
   font-style: normal;
 }

 .datatable-icon-prev:before {
   content: "\eb39";
   font-family: 'icofont';
   font-style: normal;
 }

遵循我的代码

我真的不知道为什么布顿的形象没有出现。所以我想在这个问题上得到你的帮助

遵循我的所有代码以更好地理解：

html:

---

我找到了解决我问题的办法

由于某些原因，ngx datatable组件使用的table.css具有错误的图标哈希。 所以我删除了下面代码中的所有内容图标

.datatable-icon-right:before {
   content: "\eb27";  <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-skip:before {
   content: "\eb3a";  <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-left:before {
   content: "\eb26";   <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-down:before {
  content: "\eb28";   <!-- REMOVE THIS -->
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-prev:before {
  content: "\eb39";  <!-- REMOVE THIS -->
  font-family: 'icofont';
  font-style: normal;
}

---

在style.scss中添加此行

@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

---

首先，你检查过元素了吗？是的，我检查过，但我无法确定问题所在。你能添加一个屏幕截图吗？或者，如果你能创建一个现场演示，那将是完美的。你好，wannadream，我找到了解决方案。我将发布修复代码。非常感谢。

import { Component, OnInit, ViewChild} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { DeviceService } from 
'../../../shared/services/device/device.service.js';
import { Device } from '../../../shared/models/device.model';
import { DatatableComponent } from '@swimlane/ngx-datatable';

 @Component({
 selector: 'app-tardis-home',
 templateUrl: './list-devices-.component.html',
 providers: [DeviceService],
 styleUrls: ['./list-devices.component.scss']
})
export class ListDevicesComponent implements OnInit {

   public listDevices: Device[];
   public temp: Device [];
   public rowLimit: number;

   @ViewChild(DatatableComponent) table: DatatableComponent;

   constructor(private httpClient: HttpClient, private deviceService: 
   DeviceService) { }

   LIMITS = [
    {value: 10 },
    {value: 25 },
    {value: 50 },
    {value: 100 },
    {value: 500 }
   ];

   public ngOnInit() {

    // start table row limit with 10
    this.rowLimit = 10;

    // load last used devices data
    this.deviceService.getAllDevices().subscribe(((listDevices: Device[]) => {
     this.listDevices= listDevices;
     this.temp = listDevices;
     console.log(this.listDevices);
    }));
}

.datatable-icon-right:before {
   content: "\eb27";  <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-skip:before {
   content: "\eb3a";  <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-left:before {
   content: "\eb26";   <!-- REMOVE THIS -->
   font-family: 'icofont';
   font-style: normal;
}

.datatable-icon-down:before {
  content: "\eb28";   <!-- REMOVE THIS -->
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-prev:before {
  content: "\eb39";  <!-- REMOVE THIS -->
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-right:before {
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-skip:before {
  font-family: 'icofont';
  font-style: normal;
}

.datatable-icon-left:before {
  font-family: 'icofont';
  font-style: normal;
}

@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';