Angular嵌套*ngFor下点击元素添加class的问题求助

我明白你遇到的麻烦了——两层循环嵌套下用二维数组控制样式，要么报错要么全选，确实挺头疼的。咱们一步步分析问题，再给你两个靠谱的解决方案：

问题根源分析 #

1. 多元素时报错：你初始化zoomImg为[[]]，也就是只有一个空的子数组。当sortedData有多个元素时，外层循环的索引a会从0开始递增到大于0的数，这时候zoomImg[a]根本不存在（因为你只初始化了zoomImg[0]），所以访问zoomImg[a][i]就会抛出Cannot read property '0' of undefined的错误。
2. 单元素时全加class：当sortedData只有一个元素时，所有内层循环的元素都在操作zoomImg[0][i]，但因为你没有提前初始化对应长度的子数组，zoomImg[0]是空数组，访问zoomImg[0][i]时数组会自动扩容但值为undefined。点击时虽然赋值为true，但因为数组结构不完整，容易触发Angular变更检测的异常，导致所有绑定的样式被误触发。

解决方案一：正确初始化二维数组 #

这种方式适合不想修改原数据的场景，核心是让zoomImg的结构和sortedData完全匹配：

Step 1: 在TS中初始化zoomImg #

当你获取到sortedData数据后，立刻生成对应结构的二维数组，每个元素初始为false：

// 假设你在获取数据的方法里，比如ngOnInit或者订阅数据的回调中
this.sortedData = 你的数据源; // 先赋值
// 生成匹配的二维数组
this.zoomImg = this.sortedData.map(item => {
  // 每个子数组的长度等于当前item下anuncio的数量
  return Array(item.data[0].anuncio.length).fill(false);
});

Step 2: HTML保持原有逻辑 #

现在zoomImg的每个索引都有对应的子数组，不会再出现undefined的情况：

<div *ngFor="let tabelaAnuncioContas of sortedData; let a = index"> 
  <tr *ngFor="let anuncio of tabelaAnuncioContas.data[0].anuncio; let i = index"> 
    <td>
      <img 
        [class.zoomImg]="zoomImg[a][i]" 
        (click)="zoomImg[a][i] = !zoomImg[a][i]" 
        [src]="anuncio.produto.foto_prin_1"
      >
    </td> 
  </tr> 
</div>

（这里可以把== true去掉，因为布尔值直接判断更简洁）

解决方案二：给每个anuncio对象添加状态属性 #

这种方式更直观，代码也更简洁，不需要维护额外的二维数组，直接把状态绑定到数据对象上：

Step 1: 在TS中给数据添加状态属性 #

当你获取到sortedData后，遍历所有anuncio对象，添加一个isZoomed属性，初始为false：

this.sortedData = 你的数据源;
this.sortedData.forEach(tabela => {
  tabela.data[0].anuncio.forEach(anuncio => {
    // 添加自定义状态属性
    anuncio.isZoomed = false;
  });
});

Step 2: 修改HTML绑定逻辑 #

直接绑定到对象的isZoomed属性，点击时切换状态：

<div *ngFor="let tabelaAnuncioContas of sortedData"> 
  <tr *ngFor="let anuncio of tabelaAnuncioContas.data[0].anuncio"> 
    <td>
      <img 
        [class.zoomImg]="anuncio.isZoomed" 
        (click)="anuncio.isZoomed = !anuncio.isZoomed" 
        [src]="anuncio.produto.foto_prin_1"
      >
    </td> 
  </tr> 
</div>

这种方式不需要关心索引，完全避免了二维数组的索引问题，推荐优先使用。

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