1

我正在构建具有 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]。我读到这可能是 angular 2 中的一个常见问题，可以通过使用自定义管道来解决。不幸的是，我不知道如何为这种特定情况编写一个。

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

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

提前致谢，

4

2 回答 2

6

那是因为您的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>
于 2016-11-01T23:04:47.557 回答
1

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

于 2016-11-01T23:05:24.743 回答