I have an issue with a function which loads posts with the ionic infinite scroll component.
The function works great on other components but in this one, the view doesn't update when I push new posts into the array.
This is the function that doesn't work:
// handles infinite scroll
// loads more posts when getting to the bottom of the page
async loadMorePosts(event): Promise<void> {
await this.postService.getUserPosts(this.userId, this.offset).toPromise().then((posts: Posts) => {
posts.rows.forEach((post: Post) => {
this.posts.push(post)
})
})
event.target.complete()
// increments offset for the next query
this.offset += this.offset
// if all data is loaded, disables infinite scroll
if (this.posts.length == this.totalPosts) {
event.target.disabled = true;
}
}
This is the one that works:
// handles infinite scroll
// loads more posts when getting to the bottom of the page
async loadMorePosts(event): Promise<void> {
await this.postService.getOwnPosts(this.offset).toPromise().then((posts: Posts) => {
return posts.rows.forEach((post: Post) => {
this.posts.rows.push(post)
})
})
event.target.complete()
// increments offset for the next query
this.offset += this.posts.offset
// if all data is loaded, disables infinite scroll
if (this.posts.rows.length == this.totalPosts) {
event.target.disabled = true;
}
}
Here is the html:
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid id="profile" class="ion-no-padding">
<ion-row class="ion-justify-content-center">
<ion-col class="profile" size="10">
<div>
<ion-avatar class="profile__avatar">
<ion-img src="/assets/img/profile_img.jpeg"></ion-img>
</ion-avatar>
</div>
<div class="profile__gym">
<div class="profile__gym-location">
<ion-icon name="location-sharp"></ion-icon>
<p>{{profile?.gym}}</p>
</div>
<div class="profile__gym-sport">
<ion-img src="/assets//img/male_flexin.png"></ion-img>
<p>{{profile?.discipline}}</p>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-col size="9">
<div class="description">
<p>{{profile?.bio}}</p>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-evenly buttons">
<ion-col size="4">
<ion-button (click)="follow()" mode="ios" expand="block">
{{profile?.isFollowing ? "Abonné(e)" : "S'abonner" }}
</ion-button>
</ion-col>
<ion-col size="4">
<ion-button (click)="navigateToDirectMessages()" mode="ios" expand="block">
Écrire
</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-col size="10">
<div (click)="navigateToFollowers(profile?.user_id)" class="follow-count">
<div class="follow-count--flex-column txt-center">
<p>{{totalPosts}}</p>
<p class="follow-count__txt">Posts</p>
</div>
<div class="follow-count--flex-column txt-center">
<p>{{following?.count}}</p>
<p class="follow-count__txt">Abonnements</p>
</div>
<div class="follow-count--flex-column txt-center">
<p>{{followers?.count}}</p>
<p class="follow-count__txt">Abonnés</p>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="ion-justify-content-center ion-margin-bottom">
<ion-col size="10">
<div class="sections">
<div (click)="setSection(0)" class="sections__gallery">
<p>Gallerie</p>
<ion-icon *ngIf="indexSection == 0" name="ellipse"></ion-icon>
</div>
<div (click)="setSection(1)" class="sections__routine">
<p>Programmes</p>
<ion-icon *ngIf="indexSection == 1" name="ellipse"></ion-icon>
</div>
<div (click)="setSection(2)" class="sections__nutrition">
<p>Diète</p>
<ion-icon *ngIf="indexSection == 2" name="ellipse"></ion-icon>
</div>
</div>
</ion-col>
</ion-row>
<ion-row class="card-row">
<ion-col>
<ion-card class="card">
<ion-slides [options]="sliderOpts" #slides (ionSlideDidChange)="slideToSection()">
<ion-slide>
<div class="gallery">
<div class="gallery__img" *ngFor="let post of posts ; let i = index">
<ion-img (click)="openLightbox(i)" [src]="imgUrl+post?.img"></ion-img>
</div>
<div *ngIf="!posts" class="gallery__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="program">
<ion-card *ngFor="let program of profile?.programs ; let i = index">
<ion-item (click)="navigateToProgram(program?.id)" detail lines="none">
<ion-label>
<h5>
{{setDay(program?.day)}}
</h5>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-icon slot="start" size="small" name="time-outline"></ion-icon>
<ion-label>
{{program?.duration}}</ion-label>
</ion-item>
</ion-card>
<div *ngIf="profile?.programs?.length == 0" class="program__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="nutrition">
<ion-card (click)="navigateToMeal(meal?.id)" *ngFor="let meal of profile?.meals">
<ion-item class="nutrition__meal" detail lines="none">
<ion-label>
<h3>
{{meal?.name}}
</h3>
<p>{{meal?.time}}</p>
</ion-label>
<ion-label class="nutrition__meal-cal">
<h3>{{calculateTotalNutriments(meal?.meal_components,"kcal_100g") | number:'1.1-1'}}Kcal</h3>
</ion-label>
</ion-item>
<ion-item lines="none" class="nutrition__meal-macros">
<ion-icon class="proteins-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Protéines</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"proteins_100g") | number:'1.1-1'}}g</p>
</ion-label>
<ion-icon class="carbs-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Glucides</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"carbohydrates_100g") | number:'1.1-1'}}g</p>
</ion-label>
<ion-icon class="fat-ellipse" name="ellipse"></ion-icon>
<ion-label>
<h5>Lipides</h5>
<p>{{calculateTotalNutriments(meal?.meal_components,"fat_100g") | number:'1.1-1'}}g</p>
</ion-label>
</ion-item>
</ion-card>
<div *ngIf="profile?.meals?.length == 0" class="nutrition__placeholder">
<ion-label>Cette section est vide</ion-label>
</div>
</div>
</ion-slide>
</ion-slides>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<app-lightbox id="lightbox" class="lightbox" [totalPosts]="totalPosts" [postIndex]="postIndex" [posts]="posts">
</app-lightbox>
<ion-infinite-scroll (ionInfinite)="loadMorePosts($event)">
<ion-infinite-scroll-content loadingSpinner="crescent">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
I'm new to this so if some informations are lacking or my request isn't properly formed, please feel free to say so.
Thanks for the help
You are missing the return keyword.
await this.postService.getUserPosts(this.userId, this.offset).toPromise().then((posts: Posts) => {
return posts.rows.forEach((post: Post) => {
this.posts.push(post)
})
})
My problem has been solved. There were conflicts with the card margin and overflow when the change detection was triggered, the new post was hidden underneath.
Related
Am learning ionic however with the following code
#ViewChild(MultiImageUploadComponent) multiImageUpload: MultiImageUploadComponent;
however when i try to implement tabs using ion-segment and ng-switch i cant seen to access multiImageUpload from the second tab. like so . i keep getting the error co.multiImageUpload is undefined whenever switching to the second tab
<ion-segment [(ngModel)]="defaultTab">
<ion-segment-button value="managePhotos">
Manage Photos
</ion-segment-button>
<ion-segment-button value="addPhotos">
Add Photos
</ion-segment-button>
</ion-segment>
<div [(ngSwitch)]="defaultTab">
<ion-grid *ngSwitchCase="'managePhotos'">
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let photo of storyData.photos">
<div class="image-container" [style.background-image]="'url('')'" (click)='photo()'></div>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngSwitchCase="'addPhotos'">
<ion-row>
<multi-image-upload></multi-image-upload>
<button ion-button block (click)="newStory()" *ngIf="!multiImageUpload.isUploading && !uploadFinished">
<ion-icon name="checkmark"></ion-icon>
Upload
</button>
<button ion-button block (click)="cancel()" color="danger" *ngIf="multiImageUpload.isUploading && !uploadFinished">
<ion-icon name="close"></ion-icon>
Cancel
</button>
</ion-row>
</ion-grid>
</div>
I am using ionic latest version. Using ion-slide, I have limited the width of every single slide to 80% which is working fine.
But if we scroll it to the end, there is white space area left and all the slides hide to the left.
Snapshot : https://firebasestorage.googleapis.com/v0/b/notpol-staging.appspot.com/o/share.PNG?alt=media&token=12d91447-5a34-499f-b7af-b587acdd6b1b
<ion-slides style="height: 34%" speed="2000">
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide style="width:80%">
<ion-card>
<img src="./assets/images/slider4.jpg" />
<ion-card-content>
<ion-card-title>
Hair Style
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
my code: (i tried to change all navbars for toolbars, and also tried adding fixed attribute to the toolbars, and no luck). any page i scroll down in my iphone, the toolbar scrolls as well, and it doesn't happen in my android.
<ion-header>
<ion-navbar
color="danger"
hideBackButton>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngIf="checkVacio()" id="cartaInicial">
<img src="assets/images/lista.png" id="imagenInicial">
<p id="parrafo" >Para crear una lista solo debes <br> presionar el boton rojo</p>
</div>
<ion-list no-lines>
<ion-item id="items"
*ngFor="let lista of Listas"
[navPush]="listaTerminada"
[navParams]="lista"
>{{lista.listaNombre}}
<p>{{lista.nombre}}</p>
<button ion-button icon-only
item-end clear color="danger"
(click)="onDelete(lista.listaNombre)"
><ion-icon name="md-close"></ion-icon></button>
</ion-item>
</ion-list>
<ion-fab bottom right>
<button ion-fab mini
color="danger"
[navPush]="cadenasMercadosPage">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>
You have to add this in your config.xml in order to avoid page from scrolling:
<preference name="DisallowOverscroll" value="true" />
I have a integrated a google maps in one of my ionic application pages and it is working fine on all browsers, and mobile platform. I used this one;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
zoomControl: false,
fullscreenControl: true
});
}
but it was not working on almost most of the platforms.
This is my .html
<ion-header *ngIf="FullScreen">
<ion-navbar class="navbar">
<ion-grid no-padding>
<ion-row align-items-center class="navbarSection">
<ion-col col-4 class="menuSection">
<button tappable ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
<div>
Menu
</div>
</button>
</ion-col>
<ion-col col-4 class="titleSection">
<ion-title>
<h5>Customers</h5>
</ion-title>
</ion-col>
<ion-col col-4 class="buttonsSection">
<ion-buttons>
<button ion-button icon-left (click)="CreateCustomer()">
<ion-icon name="contact"></ion-icon>
New Customer
</button>
</ion-buttons>
</ion-col>
</ion-row>
<ion-row align-items-center>
</ion-row>
</ion-grid>
</ion-navbar>
</ion-header>
<ion-content class="backcolor-pagegray">
<div [hidden]="!MapView" #map id="map"></div>
</ion-content>
I tried to do this one https://www.doogal.co.uk/FullScreen.php
but I had typescript errors.
What is the best way to achieve that?
i have this 2 loops
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests" href="#">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>
i want to test if(category.id === test.cat_id) then show the second list
i'm not sure if and how to use ngif, or if i should take care of this in the controller and return one object already formatted for my needs..
any ideas?
If I understand correctly you want to conditionally show the second ng-repeat. If that is the case then you can use this:
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests" href="#" ng-if="category.id === test.cat_id">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>
Another option would be to use a filter like this:
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests | filter: {cat_id: category.id}" href="#" ng-if="category.id === test.cat_id">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>
I would actually recommend the filter option.
What about something like this?
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests | filter:{cat_id: category.id}" href="#">
{{test.name}} {{test.cat_id}}
</ion-item>
</ion-item>
</ion-list>