Ionic 6/Capacitor：如何将输入的距离值存入SQLite数据库？

错误ERROR TypeError: Cannot read properties of undefined (reading 'distance')的核心原因是**faveroute变量仅声明但未初始化**，调用this.faveroute['distance']时，faveroute仍为undefined，导致无法读取distance属性。同时代码还存在页面传值缺失、ngModel使用错误等问题，以下是完整修复方案：

1. 初始化Result页面的faveroute对象 #

在result.ts中声明faveroute时直接初始化，避免出现undefined状态：

faveroute: RouteInterface = { id: 0, distance: 0 }; // 初始化默认值

2. 完善Home到Result页面的距离值传递 #

首先修改Home页的跳转方法，传递用户输入的distance值：

home.ts #

import { Router } from '@angular/router';
// ...
geodata = { distance: 0 }; // 先初始化geodata对象

constructor(private router: Router) {}

navigateToResultPage() {
  this.router.navigate(['/result'], {
    queryParams: { distance: this.geodata.distance }
  });
}

然后在Result页面接收传递的参数：

result.ts #

import { ActivatedRoute } from '@angular/router';
// ...
distance: number = 0;

constructor(private activatedRoute: ActivatedRoute, private dataBaseService: DatabaseService) {
  // 接收Home页传递的参数
  this.activatedRoute.queryParams.subscribe(params => {
    if (params['distance']) {
      this.distance = Number(params['distance']);
      this.faveroute.distance = this.distance; // 同步到faveroute对象
    }
  });
}

3. 修正Result页面的ngModel错误 #

ngModel是表单控件（如ion-input）的双向绑定指令，不能直接用在<p>标签上，删除Result.html中p标签的[(ngModel)]：

Result.html #

<p>Distance: {{distance}}</p>

4. 修正addRouteToFavorite方法逻辑 #

原方法调用顺序错误，需确保distance值已正确赋值后再调用数据库服务：

result.ts #

addRouteToFavorite() {
  const saveDistance = this.distance; // 使用已接收的距离值
  if (saveDistance) {
    this.dataBaseService.addFavoriteRoute(saveDistance)
      .then((insertedId) => {
        // 插入成功后更新本地对象，id由数据库自增返回
        this.faveroute = { id: insertedId, distance: saveDistance };
      })
      .catch(err => {
        console.error('保存收藏失败:', err);
      });
  } else {
    console.error('距离值为空，无法保存');
  }
}

5. 可选：完善DatabaseService的返回逻辑 #

让数据库服务返回插入的记录ID，方便组件后续使用：

DatabaseService.ts #

addFavoriteRoute(distance: number) {
  const data = [distance];
  return this.database.executeSql('INSERT INTO favoriteroutes (distance) VALUES (?)', data)
    .then((result) => {
      const insertedId = result.insertId;
      this.getAllFavoriteRoutes();
      return insertedId;
    })
    .catch(err => {
      console.error('插入数据库失败:', err);
      throw err;
    });
}

完成以上修改后，点击「保存至收藏」按钮即可正确将用户输入的distance值存入SQLite数据库，同时解决了原有的TypeError问题。

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