Angular-SlickGrid页脚未正确显示

Question

我有一个Angular 7网站，我正在使用angular-slickgrid组件。我在页脚上显示总计数时遇到问题。

它不是显示文本“每页项目数”和实际的项目总数，而是显示我认为是变量名称的内容。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Column, FieldType, Filters, Formatters, GridOdataService, GridOption, Statistic } from 'angular-slickgrid';
import { GridHelper } from 'src/app/core/helpers/gridHelper/grid-helper';
import { EbPagination } from 'src/app/core/models/eb-pagination';
import { AuthenticationService } from 'src/app/Services/Authentication/authentication.service';
import { PolicyService } from 'src/app/Services/Policy/policy.service';
import { Policy } from '../../models/policy.model';


@Component({
  selector: 'app-policy-search',
  templateUrl: './policy-search.component.html',
  styleUrls: ['./policy-search.component.sass']
})
export class PolicySearchComponent implements OnInit {
  policies: Policy[];
  columnDefs: Column[] = [];
  gridOptions: GridOption = {};
  statistics: Statistic;
  pagination: EbPagination;
  odataQuery: '';

  constructor(
    private authService: AuthenticationService,
    private policyService: PolicyService,
    private router: Router) { }

  ngOnInit() {
    this.columnDefs = [
      { id: 'policyOrQuote', name: "Policy or Quote", field: "PolicyOrQuote", sortable: true, filterable: true },
      { id: 'PolicyReference', name: "Policy Reference", field: "PolicyReference", sortable: true, filterable: true },
      { id: 'Version', name: "Version", field: "Version", sortable: true, filterable: true },
      { id: 'MaxVersion', name: "Max Version", field: "MaxVersion", sortable: true, filterable: true },
      {
        id: 'IsLatest', name: "Is Latest Version", field: "IsLatest", formatter: Formatters.yesNo, sortable: true, type: FieldType.boolean,
        filterable: true,
        filter: {
          collection: [{ value: '', label: 'All' }, { value: true, label: 'Yes' }, { value: false, label: 'No' }],
          model: Filters.singleSelect,
          searchTerms: [],
          filterOptions: {
            offsetLeft: 14,
            width: 100
          },
        }
      },
      { id: 'ProcessingUnit', name: "Processing Unit", field: "ProcessingUnit", sortable: true, filterable: true },
      { id: 'ProfitCentre', name: "Profit Centre", field: "ProfitCentre", sortable: true, filterable: true },
      { id: 'InceptionDate', name: "Inception Date", field: "InceptionDate", formatter: Formatters.dateIso, sortable: true, filterable: false },
      { id: 'CancelledDate', name: "Cancelled Date", field: "CancelledDate", formatter: Formatters.dateIso, sortable: true, filterable: false },
      { id: 'LastModifiedDate', name: "LastModified Date", field: "LastModifiedDate", formatter: Formatters.dateTimeIso, sortable: true, filterable: false },
    ];

    this.gridOptions = {
      pagination: {
        pageSizes: [10, 15, 20, 25, 50, 100],
        pageSize: 25,
        totalItems: 0,
      },
      backendServiceApi: {
        service: new GridOdataService(),
        process: (query) => this.getData(query),
        postProcess: (response) => {
          this.statistics = response.statistics;
          this.getDataCallback(response);
        }
      }
    };
  }

  getData(query: string) {
    let gridHelper = new GridHelper();
    let filterString = gridHelper.buildFilter(query);
    return this.policyService.loadPolicies(gridHelper.pageNumber, gridHelper.pageSize, filterString);
  }

  getDataCallback(response) {
    let gridHelper = new GridHelper();
    this.pagination = gridHelper.extractPaginationFromHeader(response);

    this.gridOptions.pagination.totalItems = this.pagination.totalCount;
    if (this.statistics) {
      this.statistics.totalItemCount = this.pagination.totalCount;
      this.statistics.itemCount = response.body.count;
    }
    this.gridOptions = Object.assign({}, this.gridOptions);
    this.policies = response.body;
    this.odataQuery = response['query'];
  }
}

模板：

<div class="row">
    <div class="col-2">
        <h4>Filter</h4>
        <div class="row">
            <div class="btn-group">
                <button class="btn btn-primary" (click)="refresh()">Refresh</button>
            </div>
        </div>
    </div>
    <div class="col-10">

        <div class="card">
            <div class="card-header">Policy search</div>
            <div class="card-body">
                <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefs" [gridOptions]="gridOptions" [dataset]="policies">
                </angular-slickgrid>
            </div>
        </div>

    </div>
</div>

如果有人对什么出错有任何想法我会很感激。

Answer 1

我通过查看网格的代码找出了我的问题。事实证明，网格使用ngx-translate来显示和填充这些字符串。

我还没有设置翻译。一旦我进行了设置，这一切都奏效了。因此，在我的情况下，用户无法正确地使用RTFM（或wiki）。 :)