[Angular] Cannot find a differ supporting object ' ' of type 'string'

[jamester go]

Hi as mentioned in the subject i've been encountering this error after fetching the 

said data using Http.get

Please see image below for the images in the code

ERROR:
ERROR Error: Cannot find a differ supporting object 'http://localhost:60055/Asset/' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Hope you can help me with this :)

Good Day

 

[Lucas Lacroix]

Best guess: ImageUrl is being set to a string instead of an array of IIcon objects. I suggest you start by using a break point or console.log call to log out what "data" is inside your subscribe function.

Note: you should not use subscribe in your constructor. This will cause a memory leak as it will never be unsubscribed from. Instead, set a member variable to the Observable returned by this.getIcons() and then use that member variable with the async operator in your template. Something like:

this.Images = this.getService.getIcons();

Then, in your template:

<li *ngFor="let image of Images | async">

    <img src="{{Image + image.Name}}" class="tn" width="200" height="160" />

</li>

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

Advanced Technology Division, MEDITECH

781-774-2293

                

Subscribe to receive emails from MEDITECH or to change email preferences.

[Sander Elias]

Hi Jamester,

What Lucas said. Also I noticed this:

<img src="{{Image + image.Name}}" class="tn" width="200" height="160" />

You should do this instead:

<img [src]="Image + image.Name" class="tn" width="200" height="160" />

Because you should get in the habit of doing it like that. When code lie it is outside a template directive (one with a *) the browser will start fetching the image file "{{Image + image.Name}}". My wild guess is that that will not be there ;)

Regards

Sander

[jamester go]

That was very helpful 

ahm just one thing regarding this, i just wanted to ask a best approach for this one,

As per image below, fill up a form where images is also part of it, the user needs to insert information and images. on the images the user can uplaod a new image or select a new one.
what i came up with is that when the user selected an existing photo a new dialog will pop up and he can select new photo and when the photo is clicked there will be

a preview of the image same with upload , what will be the best approached for this

Thanks you

On Fri, Jun 15, 2018 at 10:37 AM, 'Lucas Lacroix' via Angular and AngularJS discussion <ang...@googlegroups.com> wrote:

Best guess: ImageUrl is being set to a string instead of an array of IIcon objects. I suggest you start by using a break point or console.log call to log out what "data" is inside your subscribe function.

Note: you should not use subscribe in your constructor. This will cause a memory leak as it will never be unsubscribed from. Instead, set a member variable to the Observable returned by this.getIcons() and then use that member variable with the async operator in your template. Something like:

this.Images = this.getService.getIcons();

Then, in your template:

<li *ngFor="let image of Images | async">

    <img src="{{Image + image.Name}}" class="tn" width="200" height="160" />

</li>

On Thu, Jun 14, 2018 at 10:27 PM jamester go <gfeli...@gmail.com> wrote:

Hi as mentioned in the subject i've been encountering this error after fetching the 

said data using Http.get

Please see image below for the images in the code

ERROR:
ERROR Error: Cannot find a differ supporting object 'http://localhost:60055/Asset/' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

Hope you can help me with this :)

Good Day

 

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

Advanced Technology Division, MEDITECH

781-774-2293

                

Subscribe to receive emails from MEDITECH or to change email preferences.

--

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscribe@googlegroups.com.

[Amrit Singh]

did any solution work for you Jamester? I'm facing the same issue. I'm new to Angular.

Thanks

Amrit

To unsubscribe from this group and stop receiving emails from it, send an email to ang...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

Advanced Technology Division, MEDITECH

781-774-2293

                

Subscribe to receive emails from MEDITECH or to change email preferences.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.

To unsubscribe from this group and stop receiving emails from it, send an email to ang...@googlegroups.com.