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"