Ionic应用跳转Tour页面时Firebase数据description未定义问题

咱们一步步来排查和解决这个问题：

1. 修复Places页面的点击事件传参问题 #

这是最核心的问题！你在places.html里的点击事件(click)="tour()"没有把当前的place对象传过去，导致跳转后Tour页面接收不到任何数据，自然this.data是undefined，访问this.data.description就会报错。

修改places.html里的ion-card点击事件：

<ion-card *ngFor="let place of places | async" (click)="tour(place)">

这样点击卡片时才会把对应的地点数据传递给Tour页面。

2. 修正Firebase数据里的字段名错误 #

看你的Firebase数据，description字段名后面多了一个空格：

"description " : "Hunza Valley is a mountainous valley..."

就算传参成功了，你在Tour页面里写this.data.description也找不到这个字段，因为字段名实际是带空格的description 。

两种解决方式：

• 方式一（推荐）：直接在Firebase控制台里把这个字段名的空格去掉，改成description，保持字段名规范。
• 方式二：如果暂时不想修改Firebase数据，就在Tour页面里用括号访问带空格的字段：

  this.description = this.data['description '];
  

3. 优化Tour页面的代码（可选） #

其实你不需要单独声明description变量，直接在模板里使用data对象的属性就行，这样更简洁：

修改tour.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-tour',
  templateUrl: 'tour.html',
})
export class TourPage {
  data: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.data = this.navParams.get('data');
    // 不需要单独赋值description了
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TourPage');
    // 可以在这里打印data，确认是否接收到数据
    console.log('Received place data:', this.data);
  }
}

然后在tour.html里直接使用：

<!-- 示例展示字段 -->
<ion-content>
  <h1>{{data.title}}</h1>
  <p>{{data.description}}</p>
  <img [src]="data.image" />
  <p>最佳季节：{{data.season}}</p>
</ion-content>

验证步骤 #

1. 先修改places.html的点击事件，确保传参正确；
2. 修正Firebase的字段名（或者修改Tour页面的字段访问方式）；
3. 重新运行应用，点击卡片跳转后，就能正常显示description、image等信息了。

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