Javascript 如何禁用动态div的按钮？

我有一个正在填充字段的FormArray，但问题是我想先禁用数组中所有formGroup的按钮，然后只启用那些被单击的按钮。下面是我的代码：

<form [formGroup]="updateOptionForm" (submit)="onUpdateOption()">
  <div class="row" formArrayName="optionList">
    <div class="col-5" *ngFor="let option of updateOptionForm.get('optionList')['controls']; let i = index;" [formGroupName]="i">
      <span>
        <mat-form-field>
          <mat-label>Option</mat-label>
          <input matInput formControlName="option_text">
        </mat-form-field>
      </span>
      <span style="margin-bottom: 10px;">
        <mat-label style="margin-right: 10px;">Answer</mat-label>
        <mat-slide-toggle color="primary" formControlName="answer" (change)="updateAnswer(i)"></mat-slide-toggle>
      </span>
      <span>
        <button type="submit" mat-mini-fab class="done" [disabled]="!i">
          <mat-icon>done</mat-icon>
        </button>
        <button type="button" mat-mini-fab class="cancel" [disabled]="!i"
        (click)="updateOptionForm.reset()">
          <mat-icon>close</mat-icon>
        </button>
      </span>
    </div>
  </div>
</form>

选项
答复
完成
关闭

但这样做是将

i

的最后一个值保持为启用状态，我理解这是因为取了

i

的最后一个值。有办法吗？就像我想说的，如果单击第一组的按钮，则另一组的按钮将被禁用，单击交叉按钮将禁用所有按钮，并在加载期间将整个阵列重置为原始状态

根据我的代码，这是当前的场景

---

这是同样的例子。

你考虑过吗！0是真的吗？只是为了检查，因为我看不到角度组件。这是组件的html，我想要的是假设如果我单击更改选项1的值，那么选项1的叉号和勾号将仅启用，而不启用其他选项