Ionic应用中无法通过控制器为ion-input赋值问题排查

你遇到的问题核心在于**[(ngModel)]和value属性的冲突**——Angular的双向数据绑定[(ngModel)]会完全接管输入框的值管理，你手动设置的value="{{selectedcollegename}}"会被直接忽略，这就是为什么移除[(ngModel)]后值能显示，但保留时不行的原因。

下面是具体的修复步骤：

1. 移除冲突的value属性 #

首先修改你的HTML代码，删掉ion-input中的value属性，让[(ngModel)]全权负责值的绑定：

<ion-item>
  <ion-label><ion-icon name="book"></ion-icon></ion-label>
  <ion-input [(ngModel)]="collegename" placeholder="College name" type="text"></ion-input>
</ion-item>

2. 将目标值赋值给ngModel绑定的变量 #

你需要把要显示的name值直接赋给[(ngModel)]绑定的collegename变量，而不是selectedcollegename（当然如果业务需要保留selectedcollegename，也可以同步赋值）。

修改你的Angular代码，在ionViewDidLoad或ngOnInit中调整赋值逻辑：

export class MessagePage {
  name: string;
  id: string;
  collegename: string = ''; // ngModel绑定的变量
  description: string = '';
  loading: any;
  selectedcollegename: string='';
  selectedcollegeid: string='';

  constructor(/* 你的依赖注入 */) {
    this.name = navParams.get('name');
    this.id = navParams.get('id');
  }

  ionViewDidLoad() {
    // 直接把值赋给ngModel绑定的collegename
    this.collegename = this.name;
    this.selectedcollegeid = this.id;
    // 如果需要保留selectedcollegename，也可以同步赋值
    this.selectedcollegename = this.name;

    console.log("collegename is "+this.collegename);
    console.log("selectedcollege id is "+this.selectedcollegeid);
  }
}

3. 额外检查：确保导入FormsModule #

如果你的页面模块还没导入FormsModule，[(ngModel)]会失效，记得在对应模块中添加：

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

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

这样修改后，输入框就会正确显示从导航参数获取的name值，同时保留[(ngModel)]的双向绑定功能，后续用户修改输入框内容时，collegename变量也会同步更新。

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