Question

这是典型的Angular材质matInput：

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

现在，当模型发生变化时应用逻辑，其他开发人员在SO中提出的通用解决方案是将 banana-in-the-box 分解为 property-binder ， 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

您可以使用pipes显示由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()函数变异，只会在视图

上变异

Answer 2

正如 Jed Cua 所说，你应该可以用管道来做。但您也可以使用局部变量手动，使用本地变量进行用户显示，使用模型属性进行计算。

在您的组件中，在 ngOnInit

modelPropertyRaw

modelPropertyRaw = digitGroup(model.property)

将输入绑定到本地变量 modelPropertyRaw
将(input)="onPropertyChange($event.target.value)"添加到您的输入
在 onPropertyChange 中，执行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

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

2 个答案: