Angular中如何实现多mat-option组件相互独立？

问题根源 #

你当前的实现中，envChoisiSansSpec、envChoisiAvecSpec这类状态变量是组件级全局变量，所有通过“Ajouter Habilitations”创建的行都共享这些变量。当某一行选择特殊环境时，全局变量被修改，导致所有行的ngIf条件同步触发，下拉选项全部切换成特殊环境的数据源。

解决方案核心 #

给每个Habilitation条目维护独立的状态，把每个条目的环境选择、权限数据源标记等状态封装到单独的对象中，而非依赖组件全局变量。同时配合Angular的FormArray管理多组表单控件，确保每个条目的表单控件相互独立。

具体实现步骤 #

1. 重构数据结构：定义包含独立状态的条目接口，每个条目存储自身的环境选择、权限列表、是否为特殊环境的标记：

// 组件TS文件中
interface HabilitationItem {
  environnement?: string;
  droit: string[];
  isSpecialEnv: boolean;
}

// 维护条目数组，初始为空
habilitations: HabilitationItem[] = [];
// 配合FormArray管理表单
habilitationsForm = new FormArray([]);

2. 修改添加/删除逻辑：点击添加按钮时，向数组中推入新的空条目，并同步添加FormGroup到FormArray：

addHabilitation() {
  this.habilitations.push({ environnement: undefined, droit: [], isSpecialEnv: false });
  this.habilitationsForm.push(new FormGroup({
    environnement: new FormControl(''),
    droit: new FormControl([])
  }));
}

removeHabilitation(index: number) {
  this.habilitations.splice(index, 1);
  this.habilitationsForm.removeAt(index);
}

3. 更新模板逻辑：将全局状态替换为每个条目自身的状态，绑定对应的FormArray控件：

<!-- 修改后的模板代码 -->
<form [formGroup]="habilitationsForm">
  <div *ngFor="let item of habilitations; let i = index" [formGroupName]="i">
    <div>{{i}}</div>
    <mat-form-field>
      <mat-select formControlName="environnement" class="no-hover" placeholder="Environnement">
        <mat-option *ngFor="let env of envListeSpec.env" [value]="env" (click)="markSpecialEnv(env, i)">
          {{env}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    &nbsp;&nbsp;
    <!-- 根据当前条目isSpecialEnv判断显示哪个下拉 -->
    <mat-form-field *ngIf="!item.isSpecialEnv">
      <mat-select formControlName="droit" multiple class="no-hover" placeholder="Type de droits">
        <mat-option *ngFor="let droit of listeDroitClassique" [value]="droit.name">
          {{droit.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field *ngIf="item.isSpecialEnv">
      <mat-select formControlName="droit" multiple class="no-hover" placeholder="Type de droits">
        <mat-option *ngFor="let droit of listeDroitSpec" [value]="droit.name">
          {{droit.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <button mat-raised-button (click)="removeHabilitation(i)">Supprimer</button>
  </div>
</form>

4. 修改环境选择逻辑：点击环境选项时，仅修改当前条目的isSpecialEnv状态：

markSpecialEnv(env: string, index: number) {
  // 根据你的业务逻辑判断当前环境是否为特殊环境
  const isSpecial = this.checkIfEnvIsSpecial(env);
  // 更新对应条目的状态
  this.habilitations[index].isSpecialEnv = isSpecial;
}

// 替换为你实际判断特殊环境的逻辑
checkIfEnvIsSpecial(env: string): boolean {
  return this.envListeSpec.specialEnvs?.includes(env) || false;
}

关键注意点 #

• 避免使用组件级全局变量存储单个条目的状态，所有与条目相关的状态必须绑定到对应条目的对象中。
• 多组表单必须使用FormArray，确保每个条目的formControlName指向独立的表单控件，而非共享同一控件。

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