Error getting images from APIRest

[juanchofelipe]

Hi!

I'm trying to use the plugin calling the images from an APIRest, the next is the code inside the component.ts

public items: any[] = []; public pageNumber = 0;

constructor( private api: ApiService) { }

ngOnInit() { this.api.getImages() .subscribe( (response) => { response.forEach(element => { this.items.push({ imageUrl: element.image }); }); }, () => alert("Unfortunately we were unable to get images.") ); }

And this is the html code:

<ImageSwipe [items]="items" imageUrlProperty="imageUrl" [pageNumber]="pageNumber" (pageChanged)="pageChanged($event)" allowZoom="false" backgroundColor="#000000">

When I run the application on an Android emulator y get the next error:

The application's PagerAdapter changed the adapter's contents without calling PagerAdapter#notifyDataSetChanged! Expected adapter item count: 0, found: 2

Any help would be very appreciated!!

[PeterStaev]

Hey @juanchofelipe , this is because the plugin does not have full angular support so what happens is that when you push your items to the array this does not trigger full refresh of the plugin's data source. Your code will work once #24 has been implemented in the meantime the workaround would be to push your items to a local variable and then assign that to the items property. So your code should look something like:

    ngOnInit() {
        this.api.getImages()
            .subscribe((response) => {
                const newItems: any[] = [];
                response.map(element => {
                    newItems.push({ imageUrl: element.image });
                });
                this.items = newItems;
            },
            () => alert("Unfortunately we were unable to get images.")
            );
    }

[juanchofelipe]

Hi @PeterStaev, thank you so much for your quick answer, it worked perfectly!