Problem with 'few' value using NgPlural

🐞 bug report

Affected Package

The issue is caused by package @angular/../i18n/localization

Description

I am using the directive [ngPlural] my code is as follows

<label [ngPlural]="viewFlight.nights">
   <ng-template ngPluralCase="=1" i18n="@@predictor_itinerary_night">noche</ng-template>
   <ng-template ngPluralCase="few" i18n="@@predictor_itinerary_nights">noches</ng-template>
</label>

According to the documentation (https://angular.io/api/common/NgPlural) The code should work

Also in angular.json> build> options> I have set the default language of the application as: "i18nLocale": "es" I don’t know if this is important since I can’t think of anything else.,

🔥 Exception or Error

Error: No plural message found for value "3"
// The error appears with any value greater than 1

🌍 Your Environment

Angular Version:

9.0.5

Anything else relevant?

[petebacondarwin]

@rockument69 - I think adding these links would be helpful, but we should make it clear that most locales do not support many of the options. We should also point out that other should always be implemented since that is the standard fallback for a missing option.

The detail is that the case is computed by calling the getPluralCase() function:

const pluralMapping = ['zero', 'one', 'two', 'few', 'many'];

/**
 * Returns the plural case based on the locale
 */
export function getPluralCase(value: string, locale: string): string {
  const plural = getLocalePluralCase(locale)(parseInt(value, 10));
  const result = pluralMapping[plural];
  return (result !== undefined) ? result : 'other';
}

You can see that this will return one of ['zero', 'one', 'two', 'few', 'many'] or 'other' based on a call to the function returned from getLocalePluralCase(). This function is defined in the locale data file of the given locale. For example, in the ar-AE locale file:

function plural(n: number): number {
  if (n === 0) return 0;
  if (n === 1) return 1;
  if (n === 2) return 2;
  if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return 3;
  if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return 4;
  return 5;
}

Note that the numbers returned correspond to the index into the ['zero', 'one', 'two', 'few', 'many'] array.

But also note that the vast majority of locales implement a much more simple plural() function such as:

function plural(n: number): number {
  let i = Math.floor(Math.abs(n)), v = n.toString().replace(/^[^.]*\.?/, '').length;
  if (i === 1 && v === 0) return 1;
  return 5;
}

See that in this case the function will only ever return 1 ('one') or 5 ('other').

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}