Angular嵌套FormArray中如何单独控制各会话按钮禁用状态

所有会话的同功能按钮绑定了同一个全局状态变量做禁用判断，没有把禁用状态的判断上下文锚定到单个会话实例，导致单个会话触发配额阈值时，全局状态变更会同步作用到所有会话的按钮上。

1. 调整数据结构，单会话独立存储自身配额 #

废弃组件顶层全局的isAssignDisabled、isDeleteDisabled这类统一控制变量，将配额值作为属性直接挂载到每个会话对象上，每个会话的状态数据完全独立：

// 定义会话数据结构
interface SessionInstance {
  sessionId: string;
  quota: number;
  // 其余业务字段按需添加
}

// 组件内维护会话列表，所有会话存在数组中独立管理
sessionList: SessionInstance[] = [
  // 初始化时每个会话自带quota字段，初始值按业务规则设置
];

2. 模板层绑定单会话级别的禁用判断 #

循环渲染会话模块时，按钮的disabled属性直接基于当前循环项的配额值做判断，不依赖全局变量：

<ng-container *ngFor="let session of sessionList">
  <div class="session-block">
    <p>当前会话配额：{{ session.quota }}</p>
    <!-- 分配配额按钮：仅当前会话配额达到上限4时禁用 -->
    <button 
      (click)="handleAddQuota(session)"
      [disabled]="session.quota >= 4"
    >
      Assign more Quota
    </button>
    <!-- 删除配额按钮：仅当前会话配额降到下限1时禁用 -->
    <button 
      (click)="handleReduceQuota(session)"
      [disabled]="session.quota <= 1"
    >
      Delete Quota
    </button>
  </div>
</ng-container>

3. 配额操作逻辑仅作用于当前目标会话 #

增减配额的方法接收当前会话实例作为参数，只修改对应实例的配额值，不触碰全局状态：

handleAddQuota(session: SessionInstance): void {
  // 加前置判断避免超过上限
  if (session.quota < 4) {
    session.quota += 1;
  }
}

handleReduceQuota(session: SessionInstance): void {
  // 加前置判断避免低于下限
  if (session.quota > 1) {
    session.quota -= 1;
  }
}

• 所有动态渲染的列表项交互状态，必须跟随列表项自身的属性计算，不要用全局变量统一管控
• 如果用响应式表单实现动态表单，每个会话对应独立的FormGroup，禁用判断直接取当前FormGroup内的配额控件值即可，不要跨控件取全局状态
• 不要在循环渲染时通过固定索引映射独立状态，容易出现索引错位导致的状态异常

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