如何在Angular中用ngFor生成10个带动态索引的图片容器？

完全可以通过Angular的*ngFor实现需求，核心是利用动态对象属性访问和循环索引替换静态数字部分，具体实现如下：

1. 组件TS文件准备循环数据源 #

先定义包含1到10的数组，作为循环依据：

// 组件.ts文件
export class YourComponent {
  // 保持你原有的imgs数据结构不变
  imgs = {
    img1: { zero: { style: {}, src: 'xxx' }, one: { style: {}, src: 'xxx' } },
    img2: { zero: { style: {}, src: 'xxx' }, one: { style: {}, src: 'xxx' } },
    // ... 依次定义到img10
  };

  // 生成1-10的数组，供ngFor遍历
  imgIndexes = Array(10).fill(0).map((_, index) => index + 1);
}

2. 模板中用*ngFor循环渲染 #

遍历数组，动态替换id、ngStyle和src中的数字部分：

<!-- 组件模板.html文件 -->
<div 
  *ngFor="let idx of imgIndexes"
  (click)="switchImg($event)" 
  class="containerImgSmall"
>
  <img
    [ngStyle]="imgs['img' + idx].zero.style"
    id="{{ idx }}"
    [src]="imgs['img' + idx].zero.src"
    alt=""
  />
  <img
    [ngStyle]="imgs['img' + idx].one.style"
    id="{{ idx }}"
    [src]="imgs['img' + idx].one.src"
    alt=""
  />
</div>

关键说明 #

• 动态属性访问：无法通过.语法直接拼接变量访问对象属性，因此用imgs['img' + idx]的方式动态获取img1到img10的对象
• 绑定优化：src使用[src]属性绑定替代插值表达式{{ }}，这是Angular更推荐的属性绑定方式
• 索引控制：直接生成1-10的数组，避免循环中额外处理index + 1的逻辑，代码更直观

内容的提问来源于stack exchange，提问作者user13002098