Deden Bangkit Deden Bangkit - 4 years ago 115
TypeScript Question

Ionic 2: join some results into one item for ion-slide

I have another similar problem with this issue, but different case. I need to display three results in ion-slide, iDangero Swipper actually will solved my problem but I belive ion-slide could do something like this also. Please check the following code;

home.ts:

books: Array<any>;

getBookDB(event, key) {
this._httpService.getBook().subscribe(
data => {
this.books = data = data.results;
console.log(data);
},
err => {
console.log(err);
}
);
}

itemTapped(event, book){
this.navCtrl.push(DetailPage, {
book: book
});
}


service provider:

apikey: string = "XXX";

getBook() {
var url = 'http://localhost:9000/findAll/BookApis/' + this.apikey;
var response = this._http.get(url).map(res => res.json());
return response;
}


and my ionic slide:

<ion-slides>
<ion-slide *ngFor="let book of books; let i = index" (click)="itemTapped($event, book)">
<ion-thumbnail item-left>
<img src="{{book.imgUrl}}">
</ion-thumbnail>
<h2>{{book.title}}</h2>
<h3>{{book.author}}</h3>
<p>{{book.category}}</p>
<button ion-button clear item-right>View</button>
</ion-slide>
</ion-slides>

Answer Source

in this document, you could bind property slidesPerView to your slide

slidesPerView - number - Slides per view. Slides visible at the same time. Default: 1.

<ion-slides [slidesPerView]="spv">
  // slide
</ion-slides>

in .ts file

spv = 3;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download