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

Question

我正在构建具有 3d 模型列表的网络应用程序。我这样做是为了练习，以获得一些关于 Angular 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]。我读到这可能是 angular 2 中的一个常见问题，可以通过使用自定义管道来解决。不幸的是，我不知道如何为这种特定情况编写一个。

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

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

提前致谢，

Answer 1

那是因为您的slides 属性实际上是Object，它是一个数组，因此单独显示该属性只会显示“对象”。您需要做的是遍历 slides 属性并单独创建 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

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