How to display an array of objects inside the html template in Angular 2?

Question

I am building web app that will have a list of 3d models. I’m doing it for a practice purposes, in order to gain some initial knowledge of angular 2.

Each listed model, will have name, main picture, category, and a slider (array of images).

Model data array is:

export var MODELS: Model[] = [{ 
  id: 1, 
  name: 'Model 1', 
  image: 'app/img/models/model-1.jpg', 
  category: 'Cat 1',
  slides: [
    { alt: 'Model 1 front view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 rear view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 1 side view' , url: 'app/img/models/model-2.jpg' }
  ]  
},
{ 
  id: 2, 
  name: 'Model 2', 
  image: 'app/img/models/model-2.jpg', 
  category: 'Cat 2',
  slides: [
    { alt: 'Model 2 front view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 2 rear view' , url: 'app/img/models/model-2.jpg' },
    { alt: 'Model 2 side view' , url: 'app/img/models/model-2.jpg' }
  ]  

}
];

Service that is used for proper displaying of certain model is:

@Injectable()
export class ModelService {

  getModels(): Promise<Model[]> {
    return Promise.resolve(MODELS);
  }

  getModel(id: number): Promise<Model> {
    return this.getModels()
           .then(models => models.find(model => model.id === id));
  }
}

Model detail’s page template is:

<div *ngIf="model">
  <h2>{{model.name}} details!</h2>
  <img [src]="model.image" alt="{{model.name}}"/>
  <div>{{model.slides}}</div>
</div>

These are Mostly stuff that I used from: https://angular.io/docs/ts/latest/tutorial/

However, when I try to use simplest way to display slides array into model-detail page, it shows [object Object]. I read that this is might be a common issue in angular 2, that can be resolved by using custom pipes. Unfortunately, I have no clue how to write one for this certain case.

General question will be: How to properly display array of objects (slides) on html template, and wrap them separately into img tag.

Here is plunker example link: http://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

Thanks in advance,

Syntactic Fructose · Accepted Answer · 2016-11-01 23:10:33Z

6

That's because your slides property is in fact an Object, it's an array so displaying the property alone will simply display 'object'. What you need to do is iterate over the slides property and separately create img divs:

<img *ngFor="let slide of model.slides" [alt]="slide.alt" [src]="slide.url" />

this is what your updated template would look like from your plunkr:

<ul class="models">
      <li *ngFor="let model of models" (click)="gotoDetail(model)">
      <img *ngFor="let slide of model.slides" [src]="slide.url"/>
      {{model.name}},{{model.category}}
      </li>
    </ul>

edited Nov 1, 2016 at 23:10

answered Nov 1, 2016 at 23:04

Syntactic Fructose

20.3k26 gold badges102 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

gundra Over a year ago

Thanks for the answer Syntactic, it really not showing [object Object] any more, but instead it writes "slide.alt slide.alt slide.alt", also cannot show any image url. Should i do something more ?

Syntactic Fructose Over a year ago

Even on your local machine? It won't display and images on plunkr because you don't have them on there, if you use the code I pasted in the edit it should work on your local machine so let me know if it doesn't

gundra Over a year ago

Syntactic, this last snippet works for models page, but i need it on model-detail page, when i try to apply it there, app breaks

gundra Over a year ago

Sorry Syntactic, it is working even on details page, I wrote wrong. Thanks a lot!!

TyAnthoney · Accepted Answer · 2016-11-01 23:05:24Z

1

You could use *ngFor in an img tag I have included some of my practice code to show you what I mean.

<div class="col-md-6" *ngFor="let picture of imageUrl; let i = index; trackBy: trackByFn">
                    <div class="portfolio-item"
                        style="padding-bottom: 10px;">
                        <a (click)="galleryOpen = false;componentIndex = i;" data-toggle="dropdown" href="#" name="gal2">
                            <img class="img-portfolio img-responsive" src={{picture}} height="350" width="455"
                                style="height: 350px; max-width: 455px;">
                        </a>
                    </div>
                </div>

The *ngFor in this case could just a easily be placed in the img tag. I hope this helps you out.

answered Nov 1, 2016 at 23:05

TyAnthoney

2884 silver badges12 bronze badges

1 Comment

gundra Over a year ago

Thank you T.Morrell for contributing to this question. Will check this code later on, just to see if somehow fits into my particular case.

Collectives™ on Stack Overflow

How to display an array of objects inside the html template in Angular 2?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related