2
我目前正在進行Coursera學習，並在特定任務中進行了處理。在Ionic中應用幻燈片
我試圖在我的項目中放一些幻燈片。我的項目是一家餐廳的菜單，我想通過滑動在菜餚之間切換。
我的問題是，我不知道放在哪裏<ion-slide>標籤和如何調用幻燈片中不同的菜（我的菜是從這個邏輯導致：*ngIf="dish"
我認爲這是一個：
<ion-header>
<ion-navbar color="primary">
<ion-title>Dish Details</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="moreOptions()">
<ion-icon name="more" showWhen="ios"></ion-icon>
<ion-icon name="more" showWhen="android, windows"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class='card'> //I created this Div to put the content to slide
<ion-slides> //Here I started the slide class
<ion-slide> //I dont know if this is the right place to start item for slide
<ion-grid>
<ion-row>
<ion-col col-12 col-lg-6>
<ion-card *ngIf="dish">
<img src="{{BaseURL + dish.image}}" />
<ion-card-content>
<ion-card-title>
{{dish.name | uppercase}}
</ion-card-title>
<p>
{{dish.description}}
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="star"></ion-icon>
<div>{{ avgstars }} stars</div>
</button>
</ion-col>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="text"></ion-icon>
<div>{{ numcomments }} Comments</div>
</button>
</ion-col>
</ion-row>
</ion-card>
<div [hidden]="dish || errMess">
<ion-spinner></ion-spinner>
<h4>Loading . . . Please Wait</h4>
</div>
<div *ngIf="errMess">
<h2>Error</h2>
<h4>{{errMess}}</h4>
</div>
</ion-col>
<ion-col col-12 col-lg-6>
<ion-list *ngIf="dish">
<ion-list-header>
Comments
</ion-list-header>
<ion-item *ngFor="let comment of dish.comments" text-wrap>
<h4> {{comment.comment}} </h4>
<p> {{comment.rating}} Stars</p>
<p>
<span> -- {{comment.author}} {{comment.date | date }} </span>
</p>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
<ion-fab bottom right *ngIf="!favorite">
<button ion-fab (click)="addToFavorites()">
<ion-icon name="heart-outline"></ion-icon>
</button>
</ion-fab>
<ion-fab bottom right *ngIf="favorite">
<button ion-fab (click)="deleteFavorite()">
<ion-icon name="heart"></ion-icon>
</button>
</ion-fab>
</ion-slide>
</ion-slides>
</div>
</ion-content>
而且我的.ts：
import { Component, Inject, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ItemSliding, ToastController, ModalController } from 'ionic-angular';
import { Dish } from '../../shared/dish';
import { Comment } from '../../shared/comment';
import { FavoriteProvider } from '../../providers/favorite/favorite';
import { ActionSheetController } from 'ionic-angular';
import { CommentPage } from '../comment/comment';
import { Observable } from 'rxjs/Observable';
@IonicPage()
@Component({
selector: 'page-dishdetail',
templateUrl: 'dishdetail.html',
})
export class DishdetailPage {
dish: Dish;
errMess: string;
avgstars: string;
numcomments: number;
favorite: boolean;
fav: Observable<Dish[]>;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public actionSheetCtrl: ActionSheetController,
public modalCtrl: ModalController,
@Inject('BaseURL') private BaseURL,
private favoriteservice: FavoriteProvider,
private toastCtrl: ToastController) {
this.dish = navParams.get('dish');
this.favorite = favoriteservice.isFavorite(this.dish.id);
this.numcomments = this.dish.comments.length;
let total = 0;
this.dish.comments.forEach(comment => total += comment.rating);
this.avgstars = (total/this.numcomments).toFixed(2);
}
ionViewDidLoad() {
console.log('ionViewDidLoad DishdetailPage');
}
addToFavorites() {
if (this.dish.id)
console.log('Adding to Favorites', this.dish.id);
this.favorite = this.favoriteservice.addFavorite(this.dish.id);
this.toastCtrl.create({
message: this.dish.name + ' added as favorite successfully',
position: 'middle',
duration: 3000
}).present();
}
deleteFavorite() {
console.log('deleting from Favorites', this.dish.id);
this.favoriteservice.deleteFavorite(this.dish.id)
this.favorite = false;
this.toastCtrl.create({
message: this.dish.name + ' deleted from favorites successfully',
position: 'middle',
duration: 3000
}).present();
}
moreOptions() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Actions',
buttons: [
{
text: 'Add to Favorites',
handler:() => {
this.addToFavorites(),
console.log('Add to Favorites clicked');
}
}, {
text: 'Add a Comment',
handler:() => {
this.openComment(),
console.log('Add a Comment clicked');
}
}, {
text: 'Cancel',
role: 'cancel',
handler:() => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
openComment() {
let modal = this.modalCtrl.create(CommentPage);
modal.onDidDismiss(data => {
if (data) {
data.date = new Date().toISOString();
this.dish.comments.push(data);
}
});
modal.present();
}
}
感謝所有幫助