htmlテンプレート内のオブジェクトの配列をAngular 2で表示する方法は？

Question

私は3Dモデルのリストを持つWebアプリケーションを構築しています。私は、角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' } 
    ] 

} 
]; 

サービスは次のとおりです。

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

しかし、スライドの配列をモデル詳細ページに表示するのにもっとも簡単な方法を使用しようとすると、[オブジェクトオブジェクト]が表示されます。これは角度2の一般的な問題であり、カスタムパイプを使用して解決できることを読んでいます。残念ながら、私はこの特定のケースのために1つを書く方法を知りません。

一般的な質問は、htmlテンプレートにオブジェクト（スライド）の配列を正しく表示し、別々にimgタグにラップする方法です。ここで

はplunker例のリンクです：事前にhttp://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

おかげで、

Answer 1

あなたslidesプロパティが実際にあるのでObjectだ、それはとても一人でプロパティを表示する配列は、単に「オブジェクト」を表示しますです。何をする必要がスライドのプロパティの上に反復処理され、個別にIMGのdivを作成します。

<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タグ私は何を意味するのかを示すために私の練習コードをいくつか含めました。

<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タグ内に簡単に配置できます。これがあなたを助けることを願っています。