Angular中输入框属性getter/setter实现方法及问题排查

嘿，我来帮你搞定这个问题！你的getter和setter代码本身没毛病，但问题大概率出在模板的绑定环节——你可能没把输入框的双向绑定正确关联到那个带get/set的属性上。

问题根源 #

你在组件类里定义了KeyValue这个带getter和setter的属性，但如果模板里输入框绑定的是其他属性（比如示例里的name，或者私有变量_keyValue），那自然不会触发setter里的日志输出。另外要注意，TypeScript是严格区分大小写的，别把模板里的属性名写错了！

修复方案 #

1. 修正模板的双向绑定
   确保你的输入框使用[(ngModel)]绑定到KeyValue属性，示例模板代码如下：

   <input type="text" [(ngModel)]="KeyValue" placeholder="输入内容试试" />
   

2. 完整的可运行示例
   你的组件类代码可以保留，这里给出组件+模板的完整示例：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'my-app',
     template: `
       <h1>{{ name }}</h1>
       <input type="text" [(ngModel)]="KeyValue" placeholder="输入内容试试" />
     `,
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     private _keyValue: string = ''; // 初始化避免undefined
     name = 'Angular 6';
   
     get KeyValue(): string {
       return this._keyValue;
     }
   
     set KeyValue(value: string) {
       console.log('==== 输入值更新：', value);
       this._keyValue = value;
     }
   }
   

额外必看提示 #

别忘了在你的模块中导入FormsModule，否则[(ngModel)]会直接失效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, FormsModule],
  // ...其他模块配置
})
export class AppModule { }

如果需要对输入值做预处理（比如去除空格、格式化），直接在setter里操作即可，比如：

set KeyValue(value: string) {
  console.log('==== 原始输入：', value);
  this._keyValue = value.trim(); // 去除首尾空格
}

这样修改后，你在输入框里输入内容时，控制台就会打印出预期的日志啦！

内容的提问来源于stack exchange，提问作者naveen