Ionic中HTML文本框、复选框数据无法传至TS，如何存储到数据库？

嘿，我来帮你搞定这个表单数据传递的问题！首先得明确：你完全不需要用$scope——现在的Ionic基于Angular，双向绑定[(ngModel)]就是用来同步HTML和TS数据的核心方式，你的日期选择器已经用上了，但其他输入框还没绑定，这就是数据拿不到的关键原因。

咱们一步步来修正：

第一步：给所有表单控件加上双向绑定 #

先修改你的HTML代码，给每个输入框、日期选择器都绑定对应的TS变量，这样用户输入的内容会自动同步到TS里：

<h3>Part 1 : General Information</h3>
<ion-list>
  <ion-item>
    <ion-label>Date</ion-label>
    <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="date"></ion-datetime>
  </ion-item>
  <ion-item>
    <ion-label stacked>First Name</ion-label>
    <ion-input type="text" aria-placeholder="First Name" placeholder="First Name" [(ngModel)]="firstName"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked>Last Name</ion-label>
    <ion-input type="text" aria-placeholder="Last Name" placeholder="Last Name" [(ngModel)]="lastName"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Birthdate</ion-label>
    <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="birthdate"></ion-datetime>
  </ion-item>
</ion-list>
<!-- 加一个保存按钮触发方法 -->
<ion-button (click)="saveQuestionnaire()">Save Form</ion-button>

第二步：在TS文件中声明变量并优化保存逻辑 #

接下来在你的TS文件里，先声明所有绑定的变量，然后直接通过这些变量获取表单数据——不用再用document.querySelector（Angular/Ionic不推荐直接操作DOM，而且封装后的组件也没法通过这种方式拿到正确值）：

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage-angular'; // 确保导入Storage

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponentPage {
  public key: string = 'Save1';
  // 声明表单对应的变量
  public date: string;
  public firstName: string;
  public lastName: string;
  public birthdate: string;
  public symptoms: any[] = []; // 假设这是你的症状数组

  constructor(private _storage: Storage) {
    // 初始化Storage（Ionic 6+需要这一步）
    this.initStorage();
  }

  async initStorage() {
    await this._storage.create();
  }

  async saveQuestionnaire() {
    // 把所有表单数据整理成对象，比数组更清晰易读
    const formData = {
      date: this.date,
      firstName: this.firstName,
      lastName: this.lastName,
      birthdate: this.birthdate,
      symptoms: this.symptoms
    };

    // 保存到Storage
    await this._storage.set(this.key, formData);
    console.log('表单数据已保存:', formData);

    // 可选：清空表单
    this.date = null;
    this.firstName = '';
    this.lastName = '';
    this.birthdate = null;
    this.symptoms = [];
  }
}

关键说明 #

1. 为什么不用$scope？：$scope是AngularJS（老版本Angular）的语法，现在的Ionic用的是Angular（v2+），双向绑定[(ngModel)]和组件类变量是标准用法，完全替代了$scope的作用。
2. 双向绑定的优势：用户在HTML输入的内容会自动同步到TS的变量里，反过来TS变量变化也会更新HTML显示，不用手动操作DOM去取值。
3. 复杂表单的进阶方案：如果你的表单字段很多、需要做输入验证，可以用Angular的响应式表单（Reactive Forms），通过FormGroup和FormControl来管理，会更便于复杂逻辑处理，但当前简单表单用ngModel完全足够。

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