Ionic 4中带ngModel的input默认值不显示及数据库存储问题求助

嘿，作为Ionic新手遇到这个问题太正常了，我来一步步帮你捋清楚～

一、保留ngModel时显示默认值的正确方式 #

你现在踩的坑是**value属性和[(ngModel)]双向绑定的优先级冲突**——Angular的双向绑定优先级远高于原生value属性，所以哪怕你写了value={{PhNumber}}，只要ngModel绑定的ph_number变量是空的，输入框就只会显示空值。

正确的思路是：直接把默认值赋值给ngModel绑定的变量，完全不需要依赖value属性。

修改步骤： #

1. 修正.ts文件的变量赋值：
   注意你代码里的变量名大小写（PhNumber vs ph_number），这也是个容易忽略的小坑！把路由参数的值直接赋给ngModel绑定的ph_number：

   // 先确保类内声明的变量和HTML绑定的一致
   msg = '';
   ph_number = '';
   
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     private sqlite: SQLite,
     private sqliteDbCopy: SqliteDbCopy
   ) { 
     // 把路由参数的值直接赋给ph_number，这样绑定的变量就有默认值了
     this.ph_number = this.route.snapshot.paramMap.get('number') || '';
   }
   

2. 简化HTML代码，移除value属性：
   因为ngModel已经绑定了有值的ph_number变量，输入框会自动同步显示这个值，不需要额外写value：

   <ion-input type="text" [(ngModel)]="ph_number"></ion-input>
   <ion-button size="small" type="submit" expand="block" (click)="saveChat()">Send Your Message</ion-button>
   

这样修改后，输入框既能正常显示默认值，又能保留ngModel的双向绑定功能——后续修改输入框内容时，ph_number变量也会同步更新，完美适配你的保存逻辑。

二、无ngModel时如何将数据保存到数据库 #

如果不需要双向绑定，只想用value属性显示默认值，那可以通过模板引用变量来获取输入框的值，再传入保存函数。

实现方式： #

1. 给ion-input添加模板引用变量：
   在HTML里给输入框加#phoneInput标记，这样就能直接获取它的当前值：

   <ion-input #phoneInput type="text" value={{PhNumber}}></ion-input>
   <ion-button size="small" type="submit" expand="block" (click)="saveChat(phoneInput.value)">Send Your Message</ion-button>
   

2. 修改saveChat函数，接收参数：
   把输入框的值作为参数传入函数，用这个参数代替之前的this.ph_number插入数据库：

   msg = '';
   
   saveChat(phoneNumber: string){
     var status = 'Outgoing';
     this.sqlite.create({ name: 'chat_app.db', location: 'default' }).then( (db: SQLiteObject) => {
       db.executeSql('CREATE TABLE IF NOT EXISTS chat_list_details(id INTEGER PRIMARY KEY AUTOINCREMENT,ph_number VARCHAR(32),status VARCHAR(32),msg TEXT)', [])
         .then(() => console.log('Executed SQL'))
         .catch(e => console.log(e));
       // 用传入的phoneNumber参数插入数据库
       db.executeSql("INSERT INTO chat_list_details (ph_number,status,msg) VALUES (?,?,?) ", [ phoneNumber, status, this.msg ] )
         .then(() => console.log('value inserted in SQL'))
         .catch(e => console.log(e));
     })
   }
   

这种直接传值的方式简单直观，适合新手；如果需要更复杂的操作，也可以用@ViewChild获取输入框元素，但这里点击事件传值足够解决问题啦。

额外小提醒： #

一定要注意变量名的大小写一致性，拼写错误是新手最容易踩的隐形坑哦～

内容的提问来源于stack exchange，提问作者Ajay Krishna Dutta