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/

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

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

以下是plunker示例链接：http://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

提前致谢，

Answer 1

那是因为您的slides属性实际上是Object，它是一个数组，因此单独显示该属性只会显示对象＆＃39;。你需要做的是迭代slide属性并单独创建img divs：

<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

你可以在img标签中使用* ngFor我已经包含了一些练习代码来向你展示我的意思。

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

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

2 个答案: