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);
Related
i want refresh app.component because in my sidemenu there is image and name so i store name and image in local storage but when i login and go to dashboard my app.component not refresh so need refresh app.components
My menu file
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="profile">
<img class="profile-picture" src="assets/imgs/user_profile.png" />
<h3 class="name">{{name}}</h3>
</div>
<ion-list class="bg-color-menu" no-lines>
<ion-item menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-item>
<ion-avatar item-start>
<img [src]="p.icon" />
</ion-avatar>
{{p.title}}
</ion-item>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
app.components
name:any;
this.name = localStorage.getItem("name");
Make your user data as BehaviorSubject.
Add a service - user.service.ts
export class UserService {
private currentUserSub = new BehaviorSubject<User>(null);
constructor(
private http: HttpClient
) {
const user = JSON.parse(localStorage.getItem('user'));
this.currentUserSub.next(user);
}
login(loginData): Observable<User> {
return this.http.post('login', loginData)
.map((res: any) => res.data)
.do((user: User) => {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSub.next(user);
});
}
getCurrentUserDetails(): Observable<User> {
const user = JSON.parse(localStorage.getItem('user'));
this.currentUserSub.next(user);
return this.currentUserSub;
}
}
call getCurrentUserDetails in app.component.ts to get the current user data
getUserDetails() {
this.userService.getCurrentUserDetails().subscribe(res => {
this.userProfile = res;
});
}
In app.html
<div class="profile">
<img class="profile-picture" src="userProfile.imgUrl" />
<h3 class="name">{{userProfile.name}}</h3>
</div>
this is an example. Do it as per your requirement.
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>
I have tried every solution but nothing has worked. I am building a chat app where i want it to be scrolled to last message automatically,also when new message comes it scrolls to the bottom.
I have tried scrollTo() on the #content but it doesn't work
chat.html
<ion-content #content *ngIf="buddy">
<div class = "chatwindow">
<ion-list no-lines *ngIf="allmessages">
<ion-item *ngFor = "let item of allmessages; let i = index" text-wrap>
<ion-avatar item-left *ngIf="item.sentby === buddy.uid">
<img src="{{buddy?.photoURL}}">
</ion-avatar>
<div class="bubble me" *ngIf="item.sentby === buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
<ion-avatar item-right *ngIf="item.sentby != buddy.uid">
<img src="{{photoURL}}">
</ion-avatar>
<div class="bubble you" *ngIf="item.sentby != buddy.uid">
<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
<img src="{{item?.message}}" *ngIf="imgornot[i]">
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
chat.ts
#ViewChild('content') content: Content;
scrolltoBottom() {
setTimeout(() => {
// this.content.scrollToBottom();
}, 1000);
}
Your code should be like this.
export class ChatPage {
#ViewChild('content') content: Content;
constructor(public navCtrl: NavController) {
this.scrolltoBottom()
}
scrolltoBottom() {
setTimeout(() => {
this.content.scrollToBottom();
}, 300);
} }
Happy new year for all of you.
I have a problem to update item in list using http request:
This is my code: in ts
ionViewWillEnter() {
const data = JSON.parse(localStorage.getItem('userData'));
this.userDetails = data.userData;
this.run_scriptsvis = setInterval(() => {
if (localStorage.getItem('sessionnewvisites') === '1') {
this.getnewvisit();
localStorage.removeItem('sessionnewvisites');
console.log('refresh');
} else {
console.log('no refresh');
}
}, 3000);
}
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
console.log(this.datacool);
});
});
}
In my html i have this:
<ion-row no-padding>
<ion-col col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12>
<ion-list no-margin>
<ion-item-sliding *ngFor="let user of datacool" (ionSwipe)="delete(user)">
<ion-item style="min-height:10vh" class="cardcolor item-tittle" no-padding text-wrap (click)="openprofile(user.userid)">
<div item-left no-margin>
<img style="max-width: 80px;margin-left: 7px;" src="{{user.tnpicture}}">
</div>
<div item-top>
<h2 text-wrap><img src="{{user.online}}"> {{user.username}}</h2>
</div>
<div class="span-small">
{{user.age}} ans, {{user.gender}}
</div>
<div item-bottom>
<div class="span-small" text-left><ion-icon name="pin"></ion-icon> {{user.countyname}}</div>
<div></div>
<h3 left padding-left>{{user.date}}</h3>
</div>
</ion-item>
<ion-item-options>
<button ion-button expandable (click)="delete((user.id))" >delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-col>
</ion-row>
The code work good and do the update when there are new data.
The problem is that I don't want to revome the older item and replace it with the new.
I want the new item in the top and the old item in bottom of the new.
Thank you so much for helping me
Thanks i have found the solution
users2: any[] = [];
getnewvisit() {
return new Promise(resolve => {
this.http.request("https://website.fr/update.php).map(
res => res.json()).subscribe(datacool => {
console.log(datacool.resultcool);
this.datacool = datacool.resultcool;
for (let i = 0; i < this.datacool.length; i++) {
this.users2.push(this.datacool[i]);
}
console.log(this.datacool);
});
});
}
I have a page where I have a section which is scrollable. However I am not able to implement infinite scroll function inside the ion-scroll section. I know infinite-scroll applies on ion-content but how can I fire an event when the user scroll downs in an ion-scroll section.
<ion-content class="main-view">
<div class="overlay" tappable (click)="dismiss()">
</div>
<div (click)="CloseScreen()">
<ion-icon name="close" tappable class="close-modal"></ion-icon>
</div>
<div>
<div class="modal_content">
<ion-scroll scrollY="true" style="height:300px">
<ion-spinner class="loading-center" *ngIf="loadingCustomers"></ion-spinner>
<div class="customer-items">
<ion-item *ngFor="let customer of customersView.paginatedCustomers" tappable (click)="SelectCustomer(customer)">
<h6>
{{customer.BusinessName}}
</h6>
</ion-item>
</div>
<ion-infinite-scroll (ionInfinite)="LoadMoreCustomers($event)"> // NOT FIRING!
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-scroll>
....OTHER STUFF
</div>
</div>
</ion-content>
I will post this in case you or someone else is still looking for an answer.
Like you said ion-infinite-scroll would only applies to the ion-content even when placed inside an ion-scroll. So you could see it firing if you add some margin to your ion-scoll and try to scroll the page itself.
However, for your case, you may want to try something like this:
https://stackoverflow.com/a/42176764/4084776
If you want to check when you reach the bottom of the scroll you could add a dummy element and check if it is near the bottom of the scroll. See the example below.
...
#ViewChild(Scroll) ionScroll: Scroll;
#ViewChild("endOfScroll") endOfScroll: ElementRef;
updating: Boolean = false;
private threshold: number = 0.01; //1% This is similar to ion-infinite-scroll threshold
...
ionViewDidLoad() {
this.ionScroll.addScrollEventListener(this.scrollHandler.bind(this));
}
...
scrollHandler(evenman){
let endOfScroll = this.endOfScroll.nativeElement.getBoundingClientRect();
let ionScroll = this.ionScroll._scrollContent.nativeElement.getBoundingClientRect();
let clearance = 1 - ionScroll.bottom/endOfScroll.bottom;
if(clearance <= this.threshold){
this.updating = true;
// DO your work here
console.log(JSON.stringify({fen: endOfScroll.bottom, lis: ionScroll.bottom}));
this.updating = false;
}
}
...
...
<ion-scroll scrollY="true">
<ion-list>
<ion-item-sliding *ngFor="let machann of lisMachann.lisMachann let endeks = index" [class.active]="endeks == endeksKlik">
<ion-item (click)="ouveFenet(endeks)">
...
</ion-item>
<ion-item-options side="left">
...
</ion-item-options>
</ion-item-sliding>
<ion-item *ngIf="updating">
<ion-spinner class="loading-center"></ion-spinner>
</ion-item>
</ion-list>
<div #endOfScroll></div>
</ion-scroll>
...