आयनिक 2

Question

में पृष्ठों के बीच डेटा पास करना मैं आयनिक के लिए बहुत नया हूं और मेरे नीचे दिए गए कोड के साथ एक समस्या पर ठोकर खाई है। मेरे पास restaurant.html नामक एक पृष्ठ है जो रेस्तरां सूचीबद्ध करता है और जब इनमें से प्रत्येक आइटम क्लिक किया जाता है तो डेटा (एक सेवा फ़ाइल से खींचा गया डेटा) दूसरे पृष्ठ पर जाता है जिसे पूर्ण विवरण देना चाहिए। हालांकि ऐसा लगता है कि यह प्रत्येक अलग रेस्तरां के लिए विवरण पास नहीं करता है। क्या कोई मुझे बता सकता है कि मैं गलत कहां जा रहा हूं?

यहां पृष्ठ हैं।

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

Answer 1

यह है क्योंकि आप अपने बजाय पैरामीटर पूरे रेस्टोरेंट विवरण के रूप में केवल रेस्टोरेंट आईडी गुजर रहे हैं।

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

अपने HTML को संशोधित करें ताकि आप संपूर्ण ऑब्जेक्ट डेटा पास कर रहे हों। इसके अलावा धक्का पर अन्य पृष्ठ पर पैरामीटर के रूप में पूरे डेटा भेजने

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

आशा है कि आप यह केवल

Answer 2

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'); 

} 

Answer 3

साथ (एकल) का प्रयास करें चारों ओर उद्धरण अपने परम कुंजी

restaurants.ts

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

और रेस्तरां-विस्तार टाइपप्रति में पर इस प्रयास करें:

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

:

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.  
    } 
} 

मैं एक कूबड़ तुम यहाँ एक आईडी के बजाय रेस्टोरेंट चाहते हैं कि राशि