Question

如果我有这个数组：

array = [
{
  img: [
        {0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
        {1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
      ],
}

{
  img: [
        {0: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
        {1: 'http://hairsalonfurniture.eu/wp-uploads/750x480_how-to-create-a-nice-hair-salon-s-reception-gjzd.jpg',},
      ],
}
]

如何用HTML显示它？我知道如何显示一个img（如果它是img）：'url'看起来像这样；

this.imgs = this.myprovider.getArray();

HTML：

<div ngfor="let item of imgs">{{item.img}}</div>

Answer 1

由于img对象数组中的键是从0开始的数字，因此您可以使用循环索引访问值：

<ul>
  <li *ngFor="let item of array">
    <ul>
      <li *ngFor="let image of item.img; let i = index">
        <img src="{{ image[i] }}" />
      </li>
    </ul>
  </li>
</ul>

由于某些原因，Stack Blitz不想加载图像URL，但是从输出中可以看到，HTML是正确的：https://stackblitz.com/edit/nested-array-example

Answer 2

尝试

<div ngfor="let item of imgs">{{item.img.toString()}}</div>

或

<div ngfor="let item of imgs">
    <div ngfor="let img of item.img">{{img}}</div>
</div>

Answer 3

您可以以嵌套方式迭代两次-

<ng-container ngfor="let childImages of imgs">
    <div ngfor="let item of childImages">{{item.img}}</div>
<ng-container>

注意：您应该使用html元素，而不是其他任何html元素，否则它将扭曲html的外观。

Answer 4

<div *ngFor="let item of imgs">
    <div *ngFor="let img of item.img; let i=index;">{{img[i]}}</div>
</div>

阵列中的Angular 2显示阵列

4 个答案: