Question

我正在制作一个Angular 2网络应用。我有一个由几个关键属性组成的模型，然后是基于这些关键值计算的其他几个属性。

我的所有属性都有getter方法。为了使我的计算属性与我的键属性保持同步，通过setter方法更改键属性，这些方法重新计算所有计算属性。这是一个简单的例子：

export class Model{
    private _keyValue: number;
    private _computedValue: number;

    getKeyValue(): number{
        return this._keyValue;
    }

    setKeyValue(value: number){
        this._keyValue = value;
        this.evaluateComputedValues(); // This might be time-consuming
    }

    getComputedValue(): number{
        return this._computedValue;
    }
}

这使我的模型保持一致：每次更改其中一个关键属性时，都会重新计算所有计算属性。

现在我需要弄清楚如何将我的属性绑定到组件视图。看起来我可以使用插值来呈现计算属性的getter：

<div>{{model.getComputedValue()}}</div>

但是，我不确定将我的键属性绑定到输入字段的最佳方法是什么。使用双向绑定的所有示例似乎都使用这样的ngModel：

<input [(ngModel)]='model.property'>

然而，这似乎是为了绑定到简单的属性。理想情况下，我需要使用单独的getter和setter方法（getKeyValue和setKeyValue）进行双向绑定。

在Angular 2中有没有内置的方法来实现这个目的？

Answer 1

您需要使用更长的表格

<input [ngModel]='model.getProperty()' (ngModelChange)="model.setProperty($event)">

您应该知道，每次更改检测运行时都会调用getXxx（）方法，这可能经常发生。确保getter返回相同的值（特别是对于同一个实例的对象），并确保getter没有副作用，否则你会得到“表达式自上次检查后发生了变化......”错误。

Answer 2

不确定上面使用的是什么版本的Angular，但是我使用的版本（v4.3.5）允许使用ngModel直接绑定到字段的getter / setter方法：在打字稿文件中：

  get AnnualRevenueFormatted():string{
    return  this.AnnualRevenue !== undefined ?  `$${this.AnnualRevenue.toLocaleString()}`: '$0';
  }

  // strip out all the currency information and apply to Annual Revenue
  set AnnualRevenueFormatted(val: string) {
    const revenueVal = val.replace(/[^\d]/g, '');
    this.AnnualRevenue = parseInt(revenueVal);
  }

并在模板文件中

<input type="text" class="text-input" [(ngModel)]="accountInfo.AnnualRevenueFormatted"  />

Angular 2：如何使用getter和setter方法将Input属性绑定到model属性？

2 个答案: