代码之家 › 专栏 › 技术社区 › mohammad rostami siahgeli

在角度上可以同时将输入绑定到两个变量吗?

angular-material angular

12

mohammad rostami siahgeli · 技术社区 · 7 年前

matInput :

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

现在要在模型更改时应用逻辑,SO中其他开发人员提出的一个常见解决方案是进入之内 属性绑定器 事件挂钩 表达:

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

基于这个逻辑,我创建了一个 digitGroup 材料输出 字段。

model.property 是一个表示数字分组号的字符串,而不是一个真正的JavaScript号,因此在每个地方我都需要访问它的值并对其进行一些数学运算,我需要 undigitGroup(model.property) 第一。

我有没有可能 材料输出 到的两个属性 model 同时呢?这样我就可以 模型属性 用于计算和 model.digitGroupedProperty 同时显示给用户。

2 回复 | 直到 7 年前

1

5

Jed Cua 7 年前

你可以用 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() 功能,仅在视图上

2

3

Sebastien Servouze 7 年前

杰德库阿 说,你应该可以用烟斗。但你也可以对于局部变量,具有用于用户显示的局部变量和用于计算的模型属性。

在组件中,初始化一个局部变量 模型属性 modelPropertyRaw = digitGroup(model.property) 恩戈尼特
模型属性
添加 (input)="onPropertyChange($event.target.value)" 你的意见
onPropertyChange公司 model.property = undigitGroup(modelPropertyRaw)

这个单独的 真实价值 显示值

编辑: 在你的文件

<!-- 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)" />

在你的文件

添加局部变量 模型属性

modelPropertyRaw: string;

添加 onPropertyChange公司 像这样工作

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