html - 数据表寻呼机的下一个按钮和后退按钮不起作用

Question

我正在元素中实现一个 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>

看我正在使用图标

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

遵循我的代码。

老实说，我不知道为什么按钮图像没有出现。所以我希望您能帮助解决这个问题。

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

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>

文件.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';