Using i18n select pipe

Question

I'm trying to use I18nSelectPipe. I have the following code:

this.criteria = [];
this.criteria.push({
  id: 1,
  name: 'ab'
});
this.criteria.push({
  id: 2,
  name: 'cd'
});
this.criteria.push({
  id: 3,
  name: 'ef'
});

this.criteriaChoice = {};
this.criteriaChoice['1'] = 'One';
this.criteriaChoice['2'] = 'Two';
this.criteriaChoice['3'] = 'Three';

In HTML:

<div *ngFor="let criterium of criteria">
  <strong>{{criterium.id | i18nSelect: criteriaChoice}}</strong>
</div>

As you may have noticed, I'm trying simply translate a "key" using that pipe, but it always returns me the following error:

ORIGINAL EXCEPTION: Invalid argument '[object Object]' for pipe 'I18nSelectPipe'

If I try something simple as below, it works:

<strong>{{'1' | i18nSelect: criteriaChoice}}</strong>

How can I solve this?

By the way, it's a sample code, the code isn't hardcoded this way.

score 2 · Accepted Answer · answered May 12 '17 at 16:58

Try:

<strong>{{criterium.id+'' | i18nSelect: criteriaChoice}}</strong>

I had the same problem with a boolean value using Angular 2.4.10.

When I looked at the code:

I18nSelectPipe.prototype.transform = function (value, mapping) {
    if (value == null)
        return '';
    if (typeof mapping !== 'object' || typeof value !== 'string') {
        throw new InvalidPipeArgumentError(I18nSelectPipe, mapping);
    }
    if (mapping.hasOwnProperty(value)) {
        return mapping[value];
    }
    if (mapping.hasOwnProperty('other')) {
        return mapping['other'];
    }
    return '';
};

I noticed that the value being piped in must be a string. When I casted value to a string using +'', the error went away.

Thanks. I just remembered that after banging my head some days I just discovered that was the problem (I forgot to post an answer) :) — dev_054, May 18 '17 at 00:52

Using i18n select pipe

1 Answers1