I am actually trying to show photos using NgxGallery. But when I run the code, I found an unexpected error in console. I am using Angular Version 12.
Here is my code - member.component.ts
:
ngOnInit(): void {
this.galleryPosts = this.getPosts();
...
}
n:any=0;
c:any=[];
getPosts(): NgxGalleryImage[] {
const postUrls = [];
for (let i = this.n; i < this.member.posts.length ; i++) {
this.c = this.member.posts[i];
for(let j=0; j < this.c[i].postedpics.length;j++)
{
postUrls.push({
small: this.c[j]?.postedpics.url,
medium: this.c[j]?.postedpics.url,
big: this.c[j]?.postedpics.url
})
}
this.n++;
return postUrls;
}
}
member.component.html
:
<div *ngFor="let m of member.posts">
<p>{{m.description}}</p>
<p *ngFor="let s of m.postedpics">{{s.url}}</p>
<ngx-gallery class="mt-4" [options]="galleryOptions" [images]="galleryPosts"
style="display: inline-block; margin-bottom: 20px;"></ngx-gallery>
</div>
This is the error:
ERROR TypeError: this.c[i] is undefined
Ember 2
RxJS 20
Angular 17
RxJS 8
Angular 17
RxJS 22
For alternative I tried
<ngx-gallery class="mt-4" [options]="galleryOptions"
[images]="small:s.url;medium:s.url;big:s.url"
style="display: inline-block; margin-bottom: 20px;"></ngx-gallery>
but I got a lot errors. it's ok.
My actual intention is how i resolve this c[i] is undefined issue, also Image not displayed as expected. I don't understand.
I am an absolute beginner. please help.
Try not to use properties as local variables, this gets confusing (this is living proof!)
getPosts(): NgxGalleryImage[] {
const postUrls = [];
for (let i = this.n; i < this.member.posts.length ; i++) {
const post = this.member.posts[i];
for(let j=0; j < post.postedpics.length;j++)
{
postUrls.push({
small: post.postedpics[j]?.url,
medium: post.postedpics[j]?.url,
big: post.postedpics[j]?.url
})
}
this.n++;
return postUrls;
}
}
See, I've changed that c
to post
and it made it clear that there was a confusion in your code... Does this look better?