是否可以在Angular中同时将输入绑定到两个变量？

Question

这是典型的Angular材质matInput:

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

现在,当模型发生变化时应用逻辑,其他开发人员在SO中提出的一个常见解决方案就是将banry in the box打破为属性绑定器和事件挂钩表达式:

<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

您可以使用管道显示按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()在视图上突变