[英]Use ion-card to display information from API on a second page
I am trying to make this to where when a user "clicks" on the card for each restaurant it will open a page (selected-card.page) where additional details (menu, price, etc) could be found.我试图做到这一点,当用户“点击”每家餐厅的卡片时,它将打开一个页面(selected-card.page),可以在其中找到其他详细信息(菜单、价格等)。 I am not quite sure how to get this done and am currently trying to use a function in a service to call to the API to display that restaurant.我不太确定如何完成这项工作,目前正在尝试在服务中使用 function 来调用 API 以显示该餐厅。
I realize I am likely far from getting this done and if you have a guide or tutorial that would help feel free to send that to me.我意识到我可能远未完成这项工作,如果您有指南或教程可以帮助您随时将其发送给我。 Thanks for the help!谢谢您的帮助!
dining.page.html (page with cards that you would click to access more details) Dining.page.html(带有卡片的页面,您可以单击以访问更多详细信息)
<ion-card (click)="onSelected(card)" class="welcome-card" *ngFor="let item of restaurantsService.restaurants">
<img class='image' src='{{ item.restaurant.featured_image }}' alt='' />
<ion-card-header>
<ion-card-title class='text'>{{ item.restaurant.name }}</ion-card-title>
<ion-card-subtitle class='text'>{{ item.restaurant.phone_numbers }}</ion-card-subtitle>
<ion-card-subtitle class='text'>{{ item.restaurant.location.address }}</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-content>
dining.page.ts餐饮页面.ts
import { ModalController } from '@ionic/angular';
import { RestaurantsService } from '../services/restaurants.service';
import { Observable } from 'rxjs';
import { SelectedCardPage } from '../selected-card/selected-card.page';
@Component({
selector: 'app-dining',
templateUrl: './dining.page.html',
styleUrls: ['./dining.page.scss'],
})
export class DiningPage implements OnInit {
constructor( private restaurantsService: RestaurantsService,
public modalCtrl: ModalController ) { };
ngOnInit() {}
async onSelected(card) {
const modal = await this.modalCtrl.create({
component: SelectedCardPage,
componentProps: { value: card }
});
return await modal.present();
}
ionViewWillEnter() {
this.restaurantsService.fetchRestaurants().subscribe();
}
}
selected-card.page.html选择卡.page.html
<ion-content>
<ion-card (click)="dismiss()" class="welcome-card" *ngFor="let item of restaurantsService.restaurants">
<img class='image' src='{{ item.restaurant.featured_image }}' alt='' />
<ion-card-header>
<ion-card-title class='text'>{{ item.restaurant.name }}</ion-card-title>
<ion-card-subtitle class='text'>{{ item.restaurant.phone_numbers }}</ion-card-subtitle>
<ion-card-subtitle class='text'>{{ item.restaurant.location.address }}</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-content>
selected-card.page.ts selected-card.page.ts
import { ModalController, NavParams } from '@ionic/angular';
import { RestaurantsService } from '../services/restaurants.service';
@Component({
selector: 'app-selected-card',
templateUrl: './selected-card.page.html',
styleUrls: ['./selected-card.page.scss'],
})
export class SelectedCardPage implements OnInit {
value: string;
constructor(private restaurantsService: RestaurantsService,
private modalCtrl: ModalController,
private navParams: NavParams) { }
ngOnInit() {
}
ionViewWillEnter() {
this.restaurantsService.fetchRestaurantDetails().subscribe();
}
ionViewDidLoad() {
this.value = this.navParams.get('value');
}
dismiss() {
this.modalCtrl.dismiss();
}
}
restaurant.service.ts餐厅服务.ts
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class RestaurantsService {
public restaurants = [];
public providers = [];
constructor( public http: HttpClient ) { }
//initial fetchRestaurants that loads on opening dining page
fetchRestaurants() {
console.log('fetching restaurants');
let headers = {'content-type': 'application/json',
'accept': 'application/json',
'user-key': '7ae71880177b226bed309d0533717b4b'};
let url = 'https://developers.zomato.com/api/v2.1/search?entity_id=757&entity_type=city&count=20'
return this.http.get(url, {headers: headers}).pipe(tap(response => {
console.log(response);
this.restaurants = response['restaurants'];
console.log(this.restaurants);
}));
}
// used to obtain information/details on a restaurant when selected
fetchRestaurantDetails() {
console.log('getting restaurant details');
let headers = {'content-type': 'application/json',
'accept': 'application/json',
'user-key': '7ae71880177b226bed309d0533717b4b'};
let url = 'https://developers.zomato.com/api/v2.1/reviews?res_id=17266091'
return this.http.get(url, {headers: headers}).pipe(tap(response => {
console.log(response);
this.restaurants = response['restaurants'];
console.log(this.restaurants);
}));
}
}
You are not sending data to your Restaurant details page (SelectedCardPage).您没有将数据发送到您的餐厅详情页面 (SelectedCardPage)。 Your click function passes 'card' but a variable or object with that name doesn't exist.您的点击 function 传递了“卡片”,但不存在具有该名称的变量或 object。 Use 'item' because your For loop is referring to each restaurant by name 'item' Your Code:使用“item”,因为您的 For 循环通过名称“item”引用每家餐厅您的代码:
<ion-card (click)="onSelected(card)" class="welcome-card" *ngFor="let item of restaurantsService.restaurants">
Changes:变化:
<ion-card (click)="onSelected(item)" class="welcome-card" *ngFor="let item of restaurantsService.restaurants">
Now, in your SelectedCardPage template, you can display the data that each restaurant item is holding.现在,在 SelectedCardPage 模板中,您可以显示每个餐厅项目所持有的数据。
<ion-content>
<ion-card (click)="dismiss()" class="welcome-card">
<img class='image' src='{{ item.restaurant.featured_image }}' alt='' />
<ion-card-header>
<ion-card-title class='text'>{{ item.restaurant.name }}</ion-card-title>
<ion-card-subtitle class='text'>{{ item.restaurant.phone_numbers }}</ion-card-subtitle>
<ion-card-subtitle class='text'>{{ item.restaurant.location.address }}</ion-card-subtitle>
</ion-card-header>
</ion-card>
</ion-content>
Since you are making the whole card clickable and you are running a loop over it to bind details.由于您使整张卡片可点击,并且您在其上运行循环以绑定详细信息。
<ion-card (click)="onSelected(card)" class="welcome-card" *ngFor="let item of
restaurantsService.restaurants">
<img class='image' src='{{ item.restaurant.featured_image }}' alt='' />
<ion-card-header>
<ion-card-title class='text'>{{ item.restaurant.name }}</ion-card-title>
<ion-card-subtitle class='text'>{{ item.restaurant.phone_numbers }}</ion-card-
subtitle>
<ion-card-subtitle class='text'>{{ item.restaurant.location.address }}</ion-card-
subtitle>
</ion-card-header>
</ion-card>
</ion-content>
Wrong:错误的:
<ion-card (click)="onSelected(card)" class="welcome-card" *ngFor="let item of
restaurantsService.restaurants">
You need to pass 'item' in the click function.您需要在单击 function 中传递“项目”。 Right:正确的:
<ion-card (click)="onSelected(item)" class="welcome-card" *ngFor="let item of
restaurantsService.restaurants">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.