Angular HTML 使用 ngFor 索引

Question

 <div (click)="switchImg($event)" class="containerImgSmall">
      <img
        [ngStyle]="imgs.img1.zero.style"
        id="1"
        src="{{ imgs.img1.zero.src }}"
        alt=""
      />
      <img
        [ngStyle]="imgs.img1.one.style"
        id="1"
        src="{{ imgs.img1.one.src }}"
        alt=""
      />
</div>

是否可以使用 ngFor 将 html 中的此 div 复制到 Angular 中 10 次？ 需要索引号来填充 id (1,2,3,4..) 以及属性 ngStyle 和 src。 例如，第一个 img 的 ngStyle 是imgs.img1.zero.style所以我想用索引替换“1”所以接下来的两个例如应该是imgs.img2.zero.style imgs.img3.zero.style 。 所以要给出完整的图片，第二个 div 应该是这样的

 <div (click)="switchImg($event)" class="containerImgSmall">
      <img
        [ngStyle]="imgs.img2.zero.style"
        id="2"
        src="{{ imgs.img2.zero.src }}"
        alt=""
      />
      <img
        [ngStyle]="imgs.img2.one.style"
        id="2"
        src="{{ imgs.img2.one.src }}"
        alt=""
      />
</div>

Answer 1

用 ng-container 包装 div

    <ng-container *ngFor="let index of indexes>
       *your div here*
    </ng-container>

其中索引是数字数组（1、2、3、4 ... 10），然后根据需要使用索引

但是如果你有对象数组和内部对象你会有样式，src 和你想要的图像的所有其他属性会更好

像这样：

[
   {
     style: '',
     src: ''
   },
   {
     style: '',
     src: ''
   }
]

另外，如果您将属性用作 img src，则替换为：

src="{{ imgs.img1.zero.src }}"

你可以这样使用它：

[src]="imgs.img1.zero.src"