I am trying to add pagination on my news app but when I scroll down I can find only the objects.
Ts file:
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
this.api.getPosts().subscribe(data=>{
console.log(data)
this.getData = data
})
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
Html part:
<ion-list>
<ion-item *ngFor="let i of getData">{{i}}</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
I want content should continue loading as I scroll down the page
doInfinite(infiniteScroll: any) {
//Do here your API call with pagination param
infiniteScroll.complete()
}
Related
users: any = [];
runHttp(){
this.http.get('https://reqres.in/api/users?page=2').subscribe(data => {
console.log(data);
this.users = Object.values(data);
})
}
and html screen :
ion-button (click)="runHttp()" >User çek</ion-button>
<ion-list *ngFor='let user of users'>
<ion-item>
<h2>{{user.email}}</h2>
</ion-item>
</ion-list>
but h2{{user.email}} is empty in html screen why ?
I'm very new in software project and currently working on final year project, mobile apps using ionic 3 framework. I have drag and drop function, first bucket with list of items and second bucket is empty. When I want to drag the items from 1st bucket to the 2nd bucket, I want to calculate the price for each entry at the second bucket but I really don't have idea to do it. Can someone help me with the codes :(
this is my calculate.ts
q1 = [];
q2 = [];
details: any = [];
totalPrice: number;
constructor(public navCtrl: NavController, private postPvdr: PostProvider, public navParams: NavParams, public dragulaService: DragulaService, public AlertController:AlertController) {
dragulaService.drop().subscribe((value) => {
console.log(value)
});
const bag: any = this.dragulaService.find('bag');
if (bag !== undefined ) this.dragulaService.destroy('bag');
this.dragulaService.createGroup('bag', {
revertOnSpill: true,
});
}
ionViewDidLoad() {
this.details = [];
this.getlist();
this.getTotalPrice()
}
getlist(){
let body = {
aksi: 'get_user'
};
this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
for(let detail of data.result){
this.details.push(detail);
console.log(data);
}
});
}
getTotalPrice(){
let totalPrice = 0;
let body = {
aksi: 'get_user'
};
this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
for(let detail of data.result){
totalPrice += Number.parseFloat(detail.dest_budget);
}
});
console.log(totalPrice);
return totalPrice;
}
these lines of codes seem weird because i just do try n error
this is my calculate.html
<ion-content padding>
<ion-row>
<ion-col width-50 class="left">
<div class="header">First Bucket</div>
<ion-list [dragula]='"bag"' [(dragulaModel)]="details">
<button ion-item *ngFor="let detail of details">
{{detail.dest_name}}
<p>{{ detail.dest_budget}}</p>
</button>
</ion-list>
</ion-col>
<ion-col width-50 class="right">
<div class="header">Second Bucket</div>
<ion-list [dragula]='"bag"' [(dragulaModel)]="q2">
<div ion-item *ngFor="let detail of q2">
{{detail.dest_name}}
<p>{{ detail.dest_budget }}</p>
</div>
</ion-list>
</ion-col>
</ion-row>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Total Price:</ion-title>
</ion-toolbar>
</ion-footer>
the total price should be showing at the footer
here is my interface looks like
hope someone can help :)
call function here
dragulaService.drop().subscribe((value) => {
this.getTotalPrice();
});
modify the function
getTotalPrice(){
this.totalPrice = 0;
let body = {
aksi: 'get_user'
};
this.postPvdr.postData(body, 'aksi_user.php').subscribe(data => {
for(let detail of data.result){
this.totalPrice += Number.parseFloat(detail.dest_budget);
}
});
}
and bind model
<ion-footer>
<ion-toolbar>
<ion-title>Total Price:{{totalPrice}}</ion-title>
</ion-toolbar>
</ion-footer>
I am making ionic project in my project i want to add double tab likes button .My proble is when tap on image then show likes icon for all post .I want to show only likes post icon .How can resolve this please help me below are my code which is used for likes icon..
tab1.page.html
<ion-header>
<ion-toolbar color="secondary">
<ion-title style="border: 1px solid #ccc" (click)="scrollToTop()">Pictagram</ion-title>
</ion-toolbar>
</ion-header>
<ion-content cache-view="false">
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<hr no-margin no-padding>
<div (swipe)="swipePage($event)">
<!-- Cards -->
<ion-card no-padding padding-bottom no-margin class="card" *ngFor="let getImage of getImages3">
<ion-row>
<ion-col col-10>
<ion-item>
<ion-avatar item-left>
<img *ngIf="getImage.sex == 'male'" src="http://localhost:8000/files/{{getImage.image || 'avatar2.png'}}">
<img *ngIf="getImage.sex == 'female'" src="http://localhost:8000/files/{{getImage.image || 'Female-Avatar.jpg'}}">
</ion-avatar>
<b style="width: 222px;display: -webkit-box;padding-left: 11px;">{{getImage.name}}</b>
</ion-item>
</ion-col>
<ion-col col-2>
</ion-col>
</ion-row>
<div>
<img src="http://localhost:8000/files/{{getImage.image || 'avatar2.png'}}" (click)="tapPhotoLike(getImage.id)">
</div>
<p no-margin no-padding>
<button clear ion-button icon-only class="like-btn">
<ion-icon no-padding [name]="like_btn.icon_name" color="{{ like_btn.color }}" class="icon-space"></ion-icon>
</button>
</p>
<ion-card-content class="padding">
<p class="like-content">
<ion-icon class="color" name="heart" ></ion-icon> {{getcounts}} likes
</p>
<p><b>{{getImage.title}}</b>{{getImage.info}}</p>
<ion-note style="font-size: 12px">
{{getImage.created_at | timeAgo}}
</ion-note>
</ion-card-content>
</ion-card>
</div>
</ion-content>
In tab1.page.ts file i am manage the icon please help me how to show icon only for liked post. how to set id please help me...
tab1.page.ts
import { Component, OnInit } from '#angular/core';
import { UserService } from '../user.service';
import { User } from '../user';
import { first } from 'rxjs/operators';
import { Storage } from '#ionic/storage';
import { ToastController } from '#ionic/angular';
import { LoadingController } from '#ionic/angular';
#Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
getImages: User[] = [];
getImages2: User[] = [];
getImages3;
getcounts;
countLikes
counts
unlikes
public like_btn = {
color: 'danger',
icon_name: 'heart-empty'
};
public tap: number = 0;
constructor(private userService: UserService,
public toastController: ToastController,
private storage: Storage,
public loadingController: LoadingController) {
}
doRefresh(event) {
this.userPost();
setTimeout(() => {
event.target.complete();
}, 2000);
}
ngOnInit() {
this.userPost();
this.getCountOfLikes();
}
async userPost() {
const loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});
await loading.present();
this.userService.getUserPost().pipe(first()).subscribe(getImages => {
this.getImages3 = getImages;
//console.log(this.getImages3);
loading.dismiss();
});
}
likeButton() {
const detail_id = this.userService.getCurrentIdpostId();
if (this.like_btn.icon_name === 'heart-empty') {
this.like_btn.icon_name = 'heart';
this.like_btn.color = 'danger';
this.storage.get('userId').then((val) => {
if (val) {
this.userService.userPostLikes(val, detail_id).pipe(first()).subscribe(
async data => {
//console.log(data);
if (data['status'] === 'you have already liked this post') {
const toast = await this.toastController.create({
message: 'you have already liked this post',
duration: 2000
});
toast.present();
}
this.getCountOfLikes();
}
);
}
});
}
else {
this.like_btn.icon_name = 'heart-empty';
this.like_btn.color = 'danger';
this.unlikePost();
this.getCountOfLikes();
}
}
tapPhotoLike($detail_id) {
this.userService.setCurrentIdpostId($detail_id);
this.tap++;
setTimeout(() => {
if (this.tap == 1) {
this.tap = 0;
//alert('Single Tap');
} if (this.tap > 1) {
this.tap = 0;
this.likeButton();
//alert('Double Tap');
}
}, 250);
}
ionViewWillEnter() {
this.userPost();
this.getCountOfLikes();
}
getCountOfLikes() {
this.userService.getCountId().pipe(first()).subscribe(likes => {
this.counts = likes;
for (var k in this.counts) {
var i = this.counts[k].detail_id;
}
this.userService.getUserPostlikes(i).pipe(first()).subscribe(getlikes => {
this.getcounts = getlikes;
});
});
}
unlikePost() {
let detail_id = this.userService.getCurrentIdpostId();
this.storage.get('userId').then((val) => {
if (val) {
this.userService.unLikes(val, detail_id).subscribe(async dislikes => {
this.unlikes = dislikes;
})
}
});
}
}
This is an general example of how you can fix your shared button problem.
We are going to make an array which will toggle values. The array will be the size of the data array. Inside we will place all values to false.
If a button is clicked, the index of the data array will be passed and this will change the value of the toggle array to true.
HTML
Looping over the data array with index i
<ion-item *ngFor="let image of images; index as i">
<ion-button (click)="toggleIcon(i)">
<ion-icon name="heart-empty" *ngIf="!iconToggle[i]"></ion-icon>
<ion-icon name="heart" *ngIf="iconToggle[i]"></ion-icon>
</ion-button>
</ion-item>
TS
If we get the data from the subscribe, we set the toggle array to all false values.
If the button is clicked, the value of the same index as the data array changes to true and the other icon can be showed in html.
images = []
iconToggle = [];
this.userService
.getUserPost()
.subscribe(res => {
this.images = res;
this.setIconToggles();
});
setIconToggles() {
let x = 0;
this.images.forEach(() => {
this.iconToggle[x] = false;
x++;
});
}
toggleIcon(num: number) {
if (this.orderToggle[num]) {
this.orderToggle[num] = false;
} else {
this.orderToggle[num] = true;
}
}
Here I m getting data I applied the infinite scrolling but the items didn't show on my scroll page below is my code:
.html
<ion-list
*ngFor="let infi of IfoData;" (click)="Item(infi.Id)" >
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content>
<ion-item>
<div >
<p>{{infi.Cost}}</p>
</div>
</ion-item>
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-list>
.js
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.IfoData.push( this.IfoData.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
After implementing this code I am just getting empty screen the data is not showing in the template and without implementing this infinite scroll it is displaying.
Infinite scroll component must comes last element in ion-content. You should try like this
<ion-content>
<ion-list>
<ion-item class="itm" *ngFor="let i of IData;" (click)="goItem(i.Id,i.Name)">
<ion-avatar item-start role="img">
<img [src]="'data:image/png;base64,'+i.Image" style="width: 110px;">
</ion-avatar>
<div class="item-inner">
<h2 class="_nme">{{i.Name}}</h2>
<p class="_price">{{i.Cost}}</p>
<ion-icon name="arrow-dropright"></ion-icon>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
ion-infinite-scroll-content is to change the default spinner and add text in infinite scroll
Refer the docs for details
put infinite scroll at the last in ion-content
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
and in your ts file
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.iData.push( this.iData.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
I'm having a problem calling the data into the view. Console log is working as I included a screenshot.
ytapiUrl =https://www.googleapis.com/youtube/v3/playlistItems? part=snippet&playlistId='blahblahbla'
getECvideolists(){
return new Promise(resolve => {
this.httpClient.get(this.ytapiUrl).subscribe(ytdata => {
resolve(ytdata);
this.Ecvideos = ytdata;
console.log(ytdata);
}, err => {
console.log(err);
});
});
}
<ion-list *ngSwitchCase="'videos'">
<ion-item *ngFor="let Ecvideo of Ecvideos">
<h2> ***this doesn't display*** {{Ecvideo.items.snippet.title}}</h2>
</ion-item>
</ion-list>
[
items key has an array so you need to iterate it through *ngFor
for example,
<ion-list *ngSwitchCase="'videos'">
<ion-item *ngFor="let item of Ecvideos.items">
<h2>{{item.snippet.title}}</h2>
</ion-item>
</ion-list>