Нижний колонтитул 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 (или вики). :)