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

时间:2018-05-21 07:32:04

标签: angular angular-material

这是典型的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同时向用户展示。

2 个答案:

答案 0 :(得分:5)

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

上变异

答案 1 :(得分:3)

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

  1. 在您的组件中,在 ngOnInit
  2. 中初始化本地变量 modelPropertyRaw modelPropertyRaw = digitGroup(model.property)
  3. 将输入绑定到本地变量 modelPropertyRaw
  4. (input)="onPropertyChange($event.target.value)"添加到您的输入
  5. onPropertyChange 中,执行model.property = undigitGroup(modelPropertyRaw)
  6. 来自显示值的真值

    编辑 .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