Блог

Главная - Вопросы по программированию - ТРУБА вызывается несколько раз, как я могу сделать так, чтобы она вызывалась только один раз?

ТРУБА вызывается несколько раз, как я могу сделать так, чтобы она вызывалась только один раз?

#javascript #angular #pipe #angular-pipe

Вопрос:

HTML : (component.html)

 <input #CostInput class="form-element" formControlName="cost" [value]="replaceDecimal.transform(FormGroup.get('cost').value)">

Труба.ts:

 commaLocaleCodes = ['AM', 'AR'];
transform(input) {
        if (input) {
            const uiLanguage = 'am');
            if (this.commaLocaleCodes.indexOf(uiLanguage.toUpperCase()) > -1) {
                return input.replace(".", ",");
            } else {
                return input.replace(",", ".");
            }
        }
    }

Проблема здесь в том, что труба вызывается несколько раз. Если мы отправим ввод = 123,45 . Труба должна вернуться на 123,45 и остановиться. Но фильтр снова вызывается. И снова ввод становится 123.45.

Труба уже чистая. Я хочу понять, сможем ли мы остановить трубу после первой итерации. Спасибо.

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

1. Я почти уверен, что канал будет вызываться каждый раз, когда цикл дайджеста пользовательского интерфейса обновляется. Если вы хотите вызвать его один раз, вам придется сделать это в коде компонента и сохранить значение. Конечно, тогда любые будущие изменения на входе не будут отражены в трубе.

Ответ №1:

При использовании стратегии обнаружения изменений по умолчанию функция, привязанная к свойству (или к директиве), будет запускаться для каждого цикла обнаружения изменений. Именно по этой причине не рекомендуется привязывать функции к свойствам и директивам.

Вместо этого вызовите функцию в контроллере, сохраните ответ в переменной и используйте привязку в шаблоне.

Контроллер (*.ts)

 export class SomeComponent implements OnInit {
  transformedValue: any;

  ngOnInit() {
    this.transformedValue = this.replaceDecimal.transform(FormGroup.get('cost').value);
  }
}

Шаблон (*.html)

 <input #CostInput class="form-element" formControlName="cost" [value]="transformedValue">

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

1. Попробовал чисто = верно , не сработало. Пришлось прибегнуть к вышеуказанному методу. Сработало ! Спасибо!

2. @Майкл Ди, пожалуйста, не могли бы вы сделать стакблитц? Действительно, это звучит для меня странно использовать [value] и formControlName вместе. Я решаю проблему с помощью размытия и фокусировки, но я не заинтересован в вашем коде

Метки: , ,