Question

我正在项目中实现一个ngx数据表，并且正在为此表自定义页脚，但是要从表更改页面的下一个按钮和后退按钮图像未显示在页脚中。

首先：跟随下图，您将看到下一个和后退按钮图像没有出现

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

<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>

看我正在使用图标

datatable-icon-left, datatable-icon-right, datatable-icon-prev and datatable-icon-skip

该图标在我的项目中位于以下路径src / scss / partials / ngx-scss / table.scss中。

在下面的代码中代表数据表页脚样式：

.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;
 }

按照我的代码。

老实说，我不知道为什么不出现buton图像。因此，在这个问题上，我想为您提供帮助。

按照我的所有代码进行更好的理解：

html：

 <ngx-datatable
      class="material"
      [rows]="deviceList"
      [columnMode]="'force'"
      [headerHeight]="50"
      [footerHeight]="50"
      [rowHeight]="'auto'"
      [limit]="rowLimit">

      <ngx-datatable-footer>
          <ng-template
            ngx-datatable-footer-template
            let-rowCount="rowCount"
            let-pageSize="pageSize"
            let-selectedCount="selectedCount"
            let-curPage="curPage"
            let-offset="offset"
            let-isVisible="isVisible">

            <div class="footer-page-size-position">
              show
            </div>
            <div class="footer-page-size-position">
              <mat-select style="text-align: center" class="mat-select-position" [(value)]="rowLimit" (selectionChange)="changeRowLimits($event.value)">
                <mat-option  *ngFor="let limit of LIMITS" [value]="limit.value">
                  {{limit.value}}
                </mat-option>
              </mat-select>
            </div>
            <div class="footer-page-size-position">
                entries
            </div>

            <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>

          </ng-template> 
      </ngx-datatable-footer>

      <ngx-datatable-column name="Photo" [width]="10">
        <ng-template let-rowIndex="rowIndex" let-rowsClient="row" ngx-datatable-cell-template>
            <img src="assets/images/widget/PHONE1.jpg" alt="" class="img-fluid">
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Product Name">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.model}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Barcode">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.barcode}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="IMEI"> 
        <ng-template let-rowIndex="rowIndex" let-tardisDevices="row" ngx-datatable-cell-template>
          {{deviceList.imei}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="SKU">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.carrier}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="HW Revision"> 
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template>
          {{deviceList.hw}}
        </ng-template>
      </ngx-datatable-column>

      <ngx-datatable-column name="Usage Status">
        <ng-template let-rowIndex="rowIndex" let-deviceList="row" ngx-datatable-cell-template> {{deviceList.deviceStatus}}</label>
        </ng-template>
      </ngx-datatable-column>
    </ngx-datatable>

file.ts

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);
    }));
}

Answer 1

将此行添加到style.scss

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

Answer 2

我找到了解决问题的方法。

由于某种原因，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;
}

因此代码使它像这样：

.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;
}

datatable-pager中的“下一步”按钮和“后退”按钮不起作用

2 个答案: