我是 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));
}
}
最佳答案
尝试在参数键周围加上(单)引号。
在 restaurants.ts 上试试这个
viewRestaurant(id)
{
this.nav.push(RestaurantDetailPage, {'id': id})
}
在餐厅详情 typescript 中:
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)">
关于angular - 在 Ionic 2 的页面之间传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42508138/