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

这是典型的Angular材质

matInput

：

现在，为了在模型更改时应用逻辑，SO中其他开发人员提出的一个常见解决方案是将“香蕉盒子”分解为属性绑定和事件挂钩表达式：

基于此逻辑，我创建了一个

digitGroup

函数，该函数获取输入数字，在每三个数字之间插入逗号，并在

matInput

字段中显示

然而，问题是现在的

model.property

是一个表示数字分组数的字符串，而不是一个真正的JavaScript数，因此在每个地方我都需要访问它的值并对其进行一些数学运算，我首先需要

undigitGroup（model.property）

是否可以同时将

matInput

绑定到

模型的两个属性？这样，我可以使用
model.property
进行计算，并将
model.digitGroupedProperty
同时显示给用户。
您可以使用显示通过
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" />



这样，您的
模型就不会被
digitGroup（）
函数改变，只会在视图上改变，正如Jed Cua所说，您应该可以使用管道来实现。但也可以使用局部变量手动执行此操作，使局部变量用于用户显示，模型属性用于计算

在组件中，在ngOnInit中初始化局部变量modelPropertyRaw
modelPropertyRaw=digitGroup（model.property）
将输入绑定到局部变量modelPropertyRaw
将
（输入）=“onPropertyChange（$event.target.value）”
添加到输入中
在onPropertyChange中，do
model.property=undigitGroup（modelPropertyRaw）
这将真实值与显示值分开


在.html文件中编辑：

像这样的Add-onPropertyChange函数

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

就这样！如果您不需要组件局部变量，请将propertyRaw添加为model的属性，并在此代码中使用它而不是modelPropertyRaw
难道您不能将其绑定到包含这两个属性的类的实例吗？将angular分开，您能为这样的控件设计规范吗？可能您需要的是matInput控件的扩展，它可以接受更多属性并可以绑定separately@Isma，这当然是一个选项，但对于每个输入都需要额外的工作，对于应用程序的总体解决方案（包括管理面板和用户面板表单），这不是一个好的解决方案。此外，简而言之，我希望能够区分真实值和显示值。在第1项中，您是指
model.modelPropertyRaw=digitGroup（model.property）
？不是，因为modelPropertyRaw是组件的局部变量，所以您可以在模型类中创建
modelPropertyRaw
属性，但如果显示的值仅用于一个组件，我肯定会把它作为这个组件的一个属性。（但我的帖子中也有一个小错误，为了更清楚，我编辑了一下）我照你说的做了，但没能成功。“如果你能提供一个小提琴手，我真的很感激。”mohammadrostamisiahgeli我用一些代码编辑了我的答案
modelPropertyRaw: string;

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