Problem with ngFor in AngularJS

[jibon57]

Hi,

Thanks for the plugin. During my testing images were missed when I had tried to load multiple images in one page using ngFor. Will you please check?

<ScrollView orientation="vertical" >
        <StackLayout>
            <StackLayout class="cardStack" *ngFor="let post of articles" >
                <NSImage *ngIf="post.img.image_fulltext" style="height: 120; width: 120"  src="{{baseURL}}/{{post.img.image_fulltext}}"></NSImage>
            </StackLayout>
        </StackLayout>
    </ScrollView>

Thanks in advance :)

[bnussey]

Hey @jibon57 I haven't tried that but I've noticed an issue if height and width is not explicitly defined. I would try and put height and width as their own tags, not wrapped in style and see if that fixes it.

[mfrro]

Hey @bnussey I'm experiencing the same issue. Declaring the width & height as you've proposed works. However, in my implementation I would prefer not having to set width & height. I think images should be displayed even if width & height aren't set, do you agree?

[bnussey]

Hey @mfrro just try setting it as 100% for width and height.. I am also looking into a solution myself but haven't found anything yet.

[mfrro]

Setting a percentage value only works if the parent element has a set width & height. Maybe this will bring you closer to a solution.

This works:

<StackLayout width="200" height="200">
   <NSImage stretch="aspectFit" [src]="pictureUrl" width="100%" height="100%"></NSImage>
</StackLayout>

This doesn't work:

<StackLayout>
   <NSImage stretch="aspectFit" [src]="pictureUrl" width="100%" height="100%"></NSImage>
</StackLayout>

[bnussey]

Thanks @mfrro .. always open to a PR if you wanna work on this as well