无法设置属性值：Angular输入框初始值设置问题求助

看起来你在Angular里设置输入框初始值时遇到了点小麻烦，我来帮你理清楚问题所在和解决办法：

核心问题分析 #

你当前的代码同时用了ngModel和[value]，这在Angular里会产生冲突——因为ngModel指令会接管输入框的值绑定逻辑，[value]的设置会被忽略。另外，[ngValue]确实不是<input>标签的合法属性，它是专门给<option>标签用的，用来绑定复杂对象类型的选项值，所以用在input上会报错。

正确的解决方案 #

根据你的需求，有两种常用方式来设置初始值：

方式1：双向绑定（推荐，适合需要后续修改值的场景）

在组件类中定义一个变量并初始化，然后用双向绑定语法[(ngModel)]关联这个变量：

1. 组件.ts文件：

import { Component } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 这里设置初始值
  inputText2 = 'hre';
}

2. 组件.html文件：

<input 
  type="text" 
  id="inputText2" 
  name="inputText2" 
  [(ngModel)]="inputText2" 
  size="5" 
  autocomplete="off" 
  autofocus
>

方式2：单向绑定（适合只需要展示初始值、不需要后续双向同步的场景）

直接用[ngModel]绑定初始值，不需要组件类变量：

<input 
  type="text" 
  id="inputText2" 
  name="inputText2" 
  [ngModel]="'hre'" 
  #inputText2="ngModel" 
  size="5" 
  autocomplete="off" 
  autofocus
>

重要注意事项 #

别忘了在你的模块（比如AppModule）中导入FormsModule，否则ngModel指令会无法生效：

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

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }

这样设置后，输入框的初始值就能正常显示啦！

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