Angular：如何为ngFor生成的动态ID元素设置样式？

原代码存在的问题 #

1. 嵌套订阅与异步冲突：内层flowService.getFlows()的订阅会在外层循环中多次触发，异步回调会覆盖idChannel和idFlow变量，最终仅能处理最后一组channel-flow组合。
2. 循环变量作用域错误：用var声明循环变量i，导致所有循环共享同一变量，异步回调执行时i已变为循环结束的最终值。
3. display属性值错误：CSS的display属性没有show这个有效值，需使用block、inline-block或flex等合法值。
4. 直接操作DOM不符合Angular范式：Angular推荐数据驱动视图，直接调用document.getElementById易出现DOM未渲染完成、视图更新不同步的问题。

推荐方案：用Angular模板指令实现（数据驱动视图） #

无需手动操作DOM，通过维护标记对象，在模板中直接根据数据控制元素显示状态。

1. Component.ts 修改

import { forkJoin } from 'rxjs';

// 存储需要显示的channel-flow组合键
visibleFlowMap: { [key: string]: boolean } = {};

check() {
  // 并行获取channels和flows，避免嵌套订阅
  forkJoin([
    this.channelService.getChannels(),
    this.flowService.getFlows()
  ]).subscribe(([channelRes, flowRes]) => {
    this.channels = channelRes.result;
    this.flows = flowRes.result;

    // 根据业务逻辑标记需要显示的组合（示例：全部显示）
    this.channels.forEach(channel => {
      this.flows.forEach(flow => {
        const key = `${channel.id}_${flow.id}`;
        this.visibleFlowMap[key] = true;
      });
    });
  });
}

2. Component.html 修改

<tr *ngFor="let channel of channels | slice: (page-1) * pageSize : page * pageSize">
  <!-- 其他代码 -->
  <ng-container *ngFor="let flow of flows">
    <td>
      <div 
        [ngStyle]="{ display: visibleFlowMap[`${channel.id}_${flow.id}`] ? 'block' : 'none' }"
      >
        <i class="bi bi-check-lg"></i>
      </div>
    </td>
  </ng-container>
</tr>

若需完全移除元素而非隐藏，可将[ngStyle]替换为*ngIf="visibleFlowMap[${channel.id}_${flow.id}]"。

备选方案：正确操作DOM的方式（不推荐） #

若必须通过DOM操作实现，需解决异步和作用域问题：

import { forkJoin } from 'rxjs';

check() {
  forkJoin([
    this.channelService.getChannels(),
    this.flowService.getFlows()
  ]).subscribe(([channelRes, flowRes]) => {
    this.channels = channelRes.result;
    this.flows = flowRes.result;

    // 确保DOM已渲染完成
    setTimeout(() => {
      this.channels.forEach(channel => {
        this.flows.forEach(flow => {
          const elem = document.getElementById(`flow_${channel.id}_${flow.id}`);
          if (elem) {
            elem.style.display = 'block'; // 使用合法的display值
          }
        });
      });
    }, 0);
  });
}

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