angular – 在Ionic 2中的页面之间传递数据
发布时间:2020-12-17 17:36:12 所属栏目:安全 来源:网络整理
导读:我对Ionic很新,偶然发现了我在下面的代码中遇到的问题.我有一个名为restaurant.html的页面,其中列出了餐馆,当点击每个项目时,数据被传递(从服务文件中提取的数据)到另一个应该提供完整详细信息的页面.然而,这似乎没有传递每个不同的餐厅的细节.谁能告诉我哪
我对Ionic很新,偶然发现了我在下面的代码中遇到的问题.我有一个名为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> 和餐馆.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)); } } 解决方法
尝试使用param键周围的(单个)引号.
在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. } } 我有预感,你想要餐厅而不是身份证: <(click)="viewRestaurant(restaurant)"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |