Ionic开发求助：点击列表项跳转详情页并传递device参数的实现

别担心，咱们一步步来搞定这个数据传递和显示的问题：

1. 先修正你的列表模板代码 #

你当前的列表里嵌套了两层<ion-item>，这不仅没必要，还可能导致点击事件的触发区域出问题，咱们改成这样：

<ion-list>
  <ion-item *ngFor="let device of devices" (click)="showDevice(device)">
    {{ device }}
    <!-- 现在点击每个device的区域都能正确触发事件了 -->
  </ion-item>
</ion-list>

2. 完善showDevice()方法的参数传递 #

你之前的思路是对的，用NavController.push()传递数据，但需要把数据包装成键值对对象，这样详情页才能准确获取到对应的数据。按照你接收时用的deviceName键，方法应该写成这样：

showDevice(selectedDevice: string) {
  console.log('选中的设备：', selectedDevice);
  // 第二个参数是传递的参数对象，键名要和详情页获取时的一致
  this.navCtrl.push(DevicePage, { deviceName: selectedDevice });
}

3. 在详情页（DevicePage）正确接收并显示数据 #

你的DevicePage类代码已经接近正确了，只需要确保在页面模板里把接收到的device值绑定到ion-title上就行：

首先是类代码（你现有的代码没问题，确认键名对应即可）： #

import { NavController, NavParams } from 'ionic-angular';
export class DevicePage {
  device: string;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // 这里的键名"deviceName"要和push时的键完全一致
    this.device = this.navParams.get("deviceName");
    console.log('接收到的设备：', this.device);
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad DevicePage');
  }
}

然后是DevicePage的模板代码，把ion-title和device绑定： #

<ion-header>
  <ion-navbar>
    <!-- 直接绑定device变量到标题 -->
    <ion-title>{{ device }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!-- 这里可以添加更多设备详情内容 -->
</ion-content>

这样操作之后，当你点击列表里的任意设备项，就能跳转到DevicePage，并且标题栏会显示你选中的设备文本啦。

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