如何在Angular 2的html模板中显示对象数组？

我正在构建具有3D模型列表的Web应用程序。我正在做这个练习的目的，以获得角2的一些初步知识。如何在Angular 2的html模板中显示对象数组？

每个列出的模型，将有名称，主图片，类别和滑块（图像数组）。

模型数据阵列是：用于进行适当的显示某些模型的

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/

但是，当我尝试使用最简单的方式将幻灯片数组显示到模型详细信息页面时，它显示[object Object]。我读到这可能是角度2中的一个常见问题，可以通过使用自定义管道来解决。不幸的是，我不知道如何为这个案例写一篇文章。

一般问题将是：如何在html模板上正确显示对象（幻灯片）的数组，并将它们分别包装到img标记中。

这里是plunker例如链接：http://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

由于提前，

来源

2016-11-01 gundra

那是因为你的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>

来源

2016-11-01 23:04:47

感谢您的回答Syntactic，它真的不再显示[object Object]，而是写入“slide.alt slide.alt slide.alt”，也不能显示任何图像url。我应该做更多的事吗？ – gundra

即使在您的本地机器上？它不会在plunkr上显示和显示图像，因为你没有它们，如果你使用我在编辑中粘贴的代码，它应该在你的本地机器上工作，所以让我知道它是不是 –

Syntactic，this last代码片段适用于模型页面，但是我需要它在模型详细信息页面上，当我尝试将其应用于此时，应用程序中断 – gundra

你可以使用* 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标签中。我希望这能够帮到你。

来源

2016-11-01 23:05:24 TyAnthoney

谢谢T.Morrell对这个问题的贡献。稍后会检查这个代码，只是为了看看是否适合我的特定情况。 – gundra

如何在Angular 2的html模板中显示对象数组？

回答

相关问题