> <ion-infinite-scroll
> position="top"
> (ionInfinite)="doInfinite($event)"
> enabled="enableScrollListener">
> <ion-infinite-scroll-content
> loadingSpinner="dots">
> </ion-infinite-scroll-content>
> </ion-infinite-scroll>
<ion-list>
<div class="message" *ngFor="let message of conversations ; let i = index; let last = last" [ngClass]="{'message--me': uid === message.memberId, 'message--multi':(conversations)[i-1]?.memberId === message.memberId}">
<div class="message__thumbnail">
<img class="message__image" *ngFor="let memObsv of group.memberProfiles" src="{{ (memObsv | async)?.profilePicture.URL }}">
</div>
<div class="message__body">
<div class="message__member" *ngFor="let memObsv of group.memberProfiles; let last = last">
{{ (memObsv| async)?.firstName }}
</div>
<div class="message__text" *ngIf="message.message">
{{message.message}}
{{last ? scrollToBottomMess() : ''}}
</div>
</div>
</div>
</ion-list>
.ts
doInfinite(infiniteScroll) {
var iteration = 10;
this.chatsProvider.changeLimit(10)
infiniteScroll.complete()
}
changeLimit(limit){
var newlimit = this.chatMessageLimit.getValue() + limit;
return this.chatMessageLimit.next(newlimit)
}
ionViewWillEnter() {
this.af__getConvoListObsv(this.group.$key, this.counter).subscribe(snap => {
console.log(snap)
this.conversations = snap
this.loading.next(false)
})
this.chatsProvider.readMessagesInGroup(this.grpID, this.profileService.getUIDString(), this.enteredTutorChat)
}
> af__getConvoListObsv(grpID) {
> return this.af.database.list(`/conversations/${grpID}`, {
> query: {
> limitToLast: this.chatMessageLimit,
> orderByChild: 'timestamp',
> }
> })
> }
scrollToBottomMess(){
this.content.scrollToBottom(0)
}
Now this Kind of works however it doesn’t scroll to bottom when tested on the iphone. If I do implement the scrollToBottomMess() function, the infinite scroll keeps trying to fetch new messages. How do I get round this?