如何在 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 示例 link：http://plnkr.co/edit/HVo3dtGprMHsPYeyRWBR?p=preview

提前致谢，

Answer 1

那是因为你的 slides 属性实际上是一个 Object，它是一个数组，所以单独显示属性只会显示 'object'。您需要做的是遍历幻灯片属性并单独创建 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 模板中显示对象数组？

How to display an array of objects inside the html template in Angular 2?

arrays

object

angular-services

angular-pipe

angular