javascriptangularangular12ngx-gallery

TypeError: this.c[i] is undefined


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.


Solution

  • 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?