В Angular как использовать запятую для цифр (только двух) и запятую для числа?

#angular

#angular

Вопрос:

Я должен отформатировать число с двумя десятичными знаками и с итальянским форматом, таким как:

1.111.111,00

У меня есть этот ввод с двусторонними привязками:

 <input type="number" [ngModel]="praticaSelezionata.Importo | number:'1.2-2':'it-IT'"
    (ngModelChange)="praticaSelezionata.Importo=$event" formControlName="importo"
    [disabled]="formDisabilitato"
    class="input-sm form-control mr-sm-4 inputRightFormat mb-sm-1"
    style="height:34px;width:40%;margin-right:3px !important" id="importo" disabled>
  

в app.module.ts я установил:

 import localeIt from '@angular/common/locales/it';
import { registerLocaleData } from '@angular/common';

registerLocaleData(localeIt);

providers:[{ provide: LOCALE_ID, useValue: 'it-IT'}...
  

но когда я вводлю цифру внутри поля ввода, я получаю эту ошибку

 InvalidPipeArgument: '10,13 is not a number' for pipe 'DecimalPipe'
  

и

 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: 10.1311'. Current value: 'undefined: 10,13'
  

и предупреждение

 The specified value "10,13" is not a valid number. The value must match to the following regular expression: -?(d |d .d |.d )([eE][- ]?d )?
  

Я новичок в angular, вы можете мне помочь?Спасибо

Ответ №1:

Значение praticaSelezionata.Importo представляет собой строку со значением «10,13». Это не число. Вы можете сделать пару вещей:

Измените способ получения данных. Я подозреваю какой-то API. Это должно возвращаться 10.13 , а не "10,13" .

Проанализируйте значение после получения данных, чтобы преобразовать строковые числа через запятую в обычные числа.

Используйте канал перед вашим каналом с номерами:

 @Pipe({
  name: 'stringNr'
})
export class StringNrPipe implements PipeTransform {
  transform(stringNr: string | number): number {
    if (typeof stringNr === 'string') {
      return Number.parseFloat(stringNr.replace(',', '.')) || 0
    }

    return stringNr || 0;
  }
}
  

Комментарии:

1. Это строка для привязки? потому что интерфейс имеет Importo: number; API возвращает Importo: 10.1311 в формате JSON

2. Я пробовал, но это не работает, ошибка, а не две цифры. Кроме того, иногда вызывается канал, а иногда нет (при запуске вызывается канал, даже если не следует)