在 [(ngModel)] 中绑定私有属性答案

【问题标题】：Binding private property in [(ngModel)]在 [(ngModel)] 中绑定私有属性
【发布时间】：2018-03-25 20:10:03
【问题描述】：

如何在 Angular 4 中绑定private 属性？

export class newItem{
  private id: number;
  private description: string;
  private insertDate: any;

  get getId() : number {
    return this.id;
  }
  set setId(name : number) {
    this.id = name;
  }
  get getDescription() : string {
    return this.description;
  }
  set setDescription(description : string) {
    this.description = description;
  }
  get getInsertDate() : string {
    return this.insertDate;
  }
  set setInsertDate(insertDate : string) {
    this.insertDate = insertDate;
  }

这里

它抛出Cannot assign to 'getInsertDate' because it is a constant or a read-only property.

【问题讨论】：

为什么你的getter和setter有不同的名字？您应该只拥有get insertDate 和set insertDate，并给私有支持属性一个不同的名称（_insertDate，按照惯例）。也就是说，鉴于你的 getter 和 setter 什么都不做，你为什么要拥有它们？
因为否则我得到错误duplicate identifier
我觉得你应该再读一遍typescriptlang.org/docs/handbook/classes.html#accessors。

标签： angular data-binding angular-ngmodel two-way-binding

【解决方案1】：

答案是改成：

private _id: number;
  get id() : number {
    return this.id;
  }
  set id(name : number) {
    this.id = name;
  }

【讨论】：

再说一次，在这种情况下，没有getter和setter。
这是为什么呢？你能告诉我吗？
你怎么想？因为他们什么都不做。您添加了多行代码和相关的认知开销，而没有任何好处。以透明方式控制对属性的访问（例如这些访问器和 Python 的属性）的好处在于，您可以完全将它们排除在外，直到您真正需要它们做某事。

【解决方案2】：

直接绑定属性即可：

Demo in this Plunker

模板：

<input [(ngModel)]="testVar" #textBox type="text"> 
<p>This is the value of testVar : {{testVar}}</p>

组件：

 export class MyComponent {
     private testVar: string = "Test this";
 }

如果您想要双重绑定并使用 getter 和 setter，那么您的 get 和 set 必须具有相同的名称（模板中使用的名称）
属性不需要在组件中公开以允许与ngModel 进行数据绑定。他们可以完全是私人的。
正如在其他答案中已经说过的那样，在您的情况下您根本不需要 getter 和 setter！。

为了你自己的头脑清醒，最好避免不必要的代码！

如果您担心封装，请不要：将模板视为组件的一部分。模板使用组件私有字段是绝对可以的（并且无需通过 get/set 访问器，除非你想要它）

如果您使用的是 Ahead Of Time (AOT) 编译

不幸的是，绑定的变量应该是公共的。

【讨论】：

我刚刚注意到我的这个旧答案被赞成了，我只是添加了一个我学到的细节：如果你使用 AOT，你将不得不使用公共变量/getter 在模板中绑定.