typescript - 在 Ionic 中应用幻灯片

Question

我目前正在做一项 Coursera 学习并陷入了一项特定任务。

我正在尝试在我的项目中放一些幻灯片。我的项目是餐厅的菜单，我想通过滑动在菜肴之间切换。

我的问题是我不知道把 <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();
  }
}

感谢您的帮助

Answer 1

您可以在 ion-slides 中使用它，如下例所示

`

<ion-slides *ngIf="urConditionForSlidesToBePresent" 
(ionSlideDidChange)="slideChanged()" slidesPerView="{{pagesPerView}}" 
 pager=false effect='slide' style="height:100% !important;">
 <ion-slide *ngFor="arrayOfImagesForSlide; let i=index">
 <div *ngIf="i >= (currentSlide-1) && i <= (currentSlide+1)">
 <!--(I have added above line so all the slides should not be loaded at 
 once... it will crash the app)-->
 <img src="{{ page }}" width="100%" 
 style="transform:translate3d(0,0,0);" (load)="picLoadCounter()">
 </div>
 </ion-slide>
 </ion-slides>

`

通过这种方式，您可以使用脚本中的数据创建幻灯片库