Как отобразить массив объектов внутри шаблона html в Angular 2?

Question

Я создаю веб-приложение, которое будет иметь список 3d моделей. Я делаю это для практических целей, чтобы получить некоторые начальные знания об угловом 2.

Каждая из перечисленных моделей будет иметь имя, основное изображение, категорию и ползунок (массив изображений).

массив данных Модель:

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, который используется для корректного отображения определенной модели: шаблон страницы

@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)); 
    } 
} 

Модель подробно является:

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

Это В основном материал, который я использовал от: https://angular.io/docs/ts/latest/tutorial/

Однако, когда я пытаюсь использовать простейший способ отображения массива слайдов на странице модели, он показывает [object Object]. Я читал, что это может быть распространенной проблемой в угловом 2, которая может быть решена с помощью пользовательских каналов. К сожалению, я не знаю, как написать один для этого конкретного случая.

Общий вопрос: как правильно отобразить массив объектов (слайдов) на html-шаблоне и обернуть их отдельно в img тег.

Вот plunker примера ссылка: http://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

Спасибо заранее,

Answer 1

Это потому, что ваше slides свойства является фактически Object, это массив так отображая свойство только будет просто отображать «объект». Что вам нужно сделать, это итерация по недвижимости горок и отдельно создать IMG дивы:

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

это то, что ваш обновленный шаблон будет выглядеть с вашего 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> 

Answer 2

Вы можете использовать * ngFor в img tag Я включил часть своего кода практики, чтобы показать вам, что я имею в виду.

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

* В этом случае * ngFor можно легко разместить в теге img. Я надеюсь, что это помогает вам.