Можно ли связать входные данные с двумя переменными одновременно в Angular?

Question

Это типичный материал Angular matInput:

<input matInput [(ngModel)]="model.property" name="property" />

Теперь, чтобы применить логику при изменении модели, общее решение, предлагаемое другими разработчиками в SO, состоит в том, чтобы сломать banana-in-the-box в свойства-связыватель и event-hook выражения:

<input matInput [ngModel]="model.property" (ngModelChange)="model.property=someLogic($event)" />

На основе этой логики я создал функцию digitGroup, котораяполучает входной номер, ставит запятые между каждыми тремя числами и показывает, что в поле matInput.

Однако проблема в том, что теперь model.property - это строка, представляющая число, сгруппированное по цифрам,вместо того, чтобы быть реальным числом JavaScript, поэтому в каждом месте мне нужно получить доступ к его значению и выполнить некоторую математическую операцию с ним, мне нужно сначала undigitGroup(model.property).

Возможно ли, что я привяжу matInput кдва свойства model одновременно?Таким образом, у меня может быть model.property для расчетов и model.digitGroupedProperty для показа пользователю, оба одновременно.

Answer 1

Как сказал Джед Куа , вы должны быть в состоянии сделать это с трубкой.Но вы также можете сделать это вручную с локальной переменной, имеющей локальную переменную для отображения пользователя и свойство модели для вычислений.

1. В вашем компоненте инициализируйте локальную переменную modelPropertyRaw modelPropertyRaw = digitGroup(model.property) in ngOnInit
2. Привязать вход к локальной переменной modelPropertyRaw
3. Добавить (input)="onPropertyChange($event.target.value)" к вашему входу
4. In onPropertyChange , do model.property = undigitGroup(modelPropertyRaw)

Это отдельное истинное значение из показанное значение .

---

РЕДАКТИРОВАТЬ: В вашем .html файле

<!-- Replaced (ngOnModelChange) by (input). Notice that you are not forced to pass the event for the behavior we want -->
<input matInput [ngModel]="modelPropertyRaw" (input)="onPropertyChange($event.target.value)" />

В вашем .ts файле

Добавитьлокальная переменная modelPropertyRaw (вы также можете добавить ее в качестве атрибута класса вашей модели)

modelPropertyRaw: string;

Добавить onPropertyChange функция, подобная этой

onPropertyChange(inputText: string)
{
  model.property = undigitGroup(modelPropertyRaw);
}

Вот и все!Если вам не нужна локальная переменная компонента, добавьте propertyRaw в качестве атрибута модели и используйте его вместо modelPropertyRaw в этом коде

Answer 2

Вы можете использовать трубы для отображения модели, преобразованной функцией digitGroup без изменения модели.

@Pipe({name: 'groupDigits'})
export class DigitGroupPipe implements PipeTransform {
  transform(value: any) {
      // Call your digitGroup() function here, then return result
  }
}

Затем используйте их следующим образом:

<input matInput [ngModel]="model.property | groupDigits" (ngModelChange)="model.property=$event" />

Таким образом, ваша model не будет видоизменяться вашей функцией digitGroup(), только в представлении