显示动态货币:Kendo模板功能:AngularJS 1.6(Java语言而不是TS)

时间:2018-12-11 20:22:42

标签: angularjs kendo-ui angularjs-scope kendo-grid angularjs-1.6

我试图根据用户偏好更改货币格式,并从localStorage获取值。根据此链接https://docs.telerik.com/kendo-ui/knowledge-base/show-different-currencies-in-the-grid,我向kendo列模板引入了一个函数,该模板在Kendo列函数(函数getDefaultColumns)之外声明。

我的问题:用field: 'INVOICE_AMOUNT_ORIGINAL',编写的模板 具有调用customCurrencyFormat的函数,但该函数未得到调用,因为在Visual Studio代码中,我可以看到警告“声明函数但未使用”。还有什么可能会使此功能到达列中的模板,或者做错了什么。

我正在尝试做的事情:我正在根据用户的喜好从本地存储中获取随机货币格式,我希望根据此更改网格列。 (所有货币格式:欧元,英镑,美元...) 任何其他方法也应受到赞赏

这是文件

    // eslint-disable-next-line
import kendo from 'kendo';
import { GetLocalColumns } from './invoiceLocalColumns';

/**
 * @typedef {{instant: (v: string) => string}} Translate
 * @typedef {{isUsUser: () => boolean}} Authentication
 * @typedef {{field_label?: string; field?: string; hidden: boolean; width: number}} Column
 *
 * The field is used to find column details for kendo
 * The column order is specified as an array of fields
 */

/**
 * @param {Translate} $translate
 * @returns {Column[]}
 */
function getDefaultColumns($translate, dateUserPreference) {
  return [
    {
      field: 'CURRENCY_CODE',
      title: $translate.instant('currencyCode'),
      headerTemplate: '{{ \'currencyCode\' | translate }}',
      width: 150
    },
    {
      field: 'INVOICE_AMOUNT_ORIGINAL',
      title: $translate.instant('invoiceAmount'),
      template: '#= customCurrencyFormat(dataItem.INVOICE_AMOUNT_ORIGINAL)#',
      headerTemplate: '{{ \'invAmount\' | translate }}',
      attributes: {
        style: 'text-align: right;'
      },
      width: 115
    },
  ];
}

    function customCurrencyFormat(currencyValue) {
  // eslint-disable-next-line prefer-template
  const curr = "'" + this.localStorage.countryWithCurrency.countrySymbol + "###.##'";
  return kendo.toString(currencyValue, curr);
}
class ColumnCustomizer {
  constructor($translate, $localStorage) {
    const culture = kendo.culture();
    console.log(culture.name);
    this.localStorage = $localStorage;
    this.defaultColumns = getDefaultColumns(
      $translate,
      $localStorage.dateFormat,
      $localStorage.countryWithCurrency.countrySymbol);
  }

  /**
   * @param {string} locale
   * @param {'collection' | 'forecast'} type the view type
   * @returns {Column[]}
   */
  GetColumns(locale, type) {
    const columnNameList = GetLocalColumns(locale, type);
    const columnMap = this.defaultColumns.reduce((res, col) => {
      if (col) {
        const label = col.field_label || col.field;
        if (res[label]) {
          throw Error(`column ${label} declared twice`);
        }
        res[label] = col;
      }
      return res;
    }, {});
    // now the column configuration in the specified order
    const res = columnNameList.map((field) => {
      const col = columnMap[field];
      if (!col) {
        throw Error(`missing configuration for column ${field}`);
      }
      return col;
    });
    return res;
  }
}

module.exports = {
  ColumnCustomizer,
};

0 个答案:

没有答案