在 Ionic 2 中的页面之间传递数据

Question

我对 Ionic 非常陌生，偶然发现了我在使用下面的代码时遇到的问题。我有一个名为 restaurant.html 的页面，其中列出了餐厅，当每个项目被点击时，数据被传递（从服务文件中提取的数据）到另一个页面，该页面应该提供完整的详细信息。然而，这似乎并没有传递每个不同餐厅的细节。谁能告诉我哪里出错了？

这是页面。

餐厅.html

<ion-header>

  <ion-navbar color="restaurant-color">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Restaurants</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="restaurants attractions common-bg">
  <div class="card round" margin-bottom *ngFor="let restaurant of restaurants" (click)="viewRestaurant(restaurant.id)">
    <div class="card-header" [ngStyle]="{'background-image': 'url(' + restaurant.thumb + ')'}"></div>
    <div class="padding-xs">
      <h5>{{ restaurant.name }}</h5>
      <div class="rating">
        <ion-icon name="md-star" color="restaurant-color" *ngFor="let star of range(restaurant.rating)"></ion-icon>
        <ion-icon name="md-star" color="gray" *ngFor="let star of range(5 - restaurant.rating)"></ion-icon>
        <span color="gray">{{ restaurant.reviews.length }} reviews</span>
      </div>
      <span color="gray">Recommended for:</span>
      <div>
        <div class="pull-left">
          <span color="restaurant-color">{{ restaurant.scores[0].name }},</span>
          <span color="restaurant-color">{{ restaurant.scores[1].name }}</span>
        </div>
        <div class="pull-right">
          {{ restaurant.location.distance }} km
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
</ion-content>

对于restaurants.ts

import {Component} from "@angular/core";
import {NavController} from "ionic-angular";
import {RestaurantService} from "../../services/restaurant-service";
import {RestaurantDetailPage} from "../restaurant-detail/restaurant-detail";


@Component({
  selector: 'page-restaurants',
  templateUrl: 'restaurants.html'
})
export class RestaurantsPage {
  // list of restaurants
  public restaurants;

  constructor(public nav: NavController, public restaurantService: RestaurantService) {
    this.restaurants = restaurantService.getAll();
  }

  // view restaurant detail
  viewRestaurant(id) {
    this.nav.push(RestaurantDetailPage, {id: id})
  }

  // make array with range is n
  range(n) {
    return new Array(Math.round(n));
  }
}

Answer 1

尝试在参数键周围加上（单）引号。

在restaurants.ts上试试这个

viewRestaurant(id) 
{
    this.nav.push(RestaurantDetailPage, {'id': id})
}

在餐厅详情打字稿中：

import { NavController, NavParams} from 'ionic-angular';
export class .... {
    id: any;
    constructor(public navParams: NavParams){
        this.id = this.navParams.get('id');
        console.log(this.id);//The id that you passed must show up now.    
    }
}

我有一种预感，你想要的是餐厅而不是这里的 id：

<(click)="viewRestaurant(restaurant)">

Answer 2

这是因为您只传递了餐厅 ID 作为参数，而不是整个餐厅的详细信息。

<div class="card round" margin-bottom *ngFor="let restaurant of restaurants" (click)="viewRestaurant(restaurant)">

修改您的 HTML 以便您传递整个对象数据。同时将整个数据作为参数发送到推送时的其他页面

 viewRestaurant(restaurant) {
    this.nav.push(RestaurantDetailPage, {id: restaurant})
  }

希望你只是在寻找这个

Answer 3

import {NavController} from 'ionic-angular';
constructor(private navController: NavController) {

this.navController.push(SecondPage, {
    param1: 'param1', param2: 'param2'
});
}

第二页：

constructor(private navController: NavController, private navParams: NavParams, private shareService: ShareService) {

this.parameter1 = navParams.get('param1'); 
this.parameter2 = navParams.get('param2');

}