在Ionic 2中的頁面之間傳遞數據

我對Ionic非常陌生，偶然發現了我在下面的代碼中遇到的問題。我有一個名爲restaurant.html的頁面，其中列出了餐館，當每個這些項目被點擊時，數據通過（從服務文件中提取的數據）傳遞到另一個應該提供全部細節的頁面。然而，這似乎並沒有通過每個不同的餐廳的細節。誰能告訴我我要去哪裏？在Ionic 2中的頁面之間傳遞數據

以下是頁面。

restaurant.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)); 
    } 
}

來源

2017-02-28 bluewavestudio

這是因爲你只透過餐廳的ID爲您的參數，而不是整個餐廳的詳細信息。

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

修改您的HTML，以便傳遞整個對象數據。同時發送整個數據作爲參數傳遞給其他頁面上推

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

希望你正在尋找這隻

來源

2017-02-28 12:27:41 AishApp

嗨，感謝您的回覆，我已經添加了這些內容，但由於某種原因，這些內容似乎都轉到了同一家餐館噸。這是bizzare，我不能解決它。 – bluewavestudio

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

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

SecondPage：

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

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

}

來源

2017-06-23 13:01:36

嘗試用（單）引號您參數鍵。

請嘗試對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)">

來源

2017-10-30 00:27:14

在Ionic 2中的頁面之間傳遞數據

回答

相關問題