启用/禁用 ngFor 中的特定按钮

Question

我想在特定行中启用保存按钮，并通过编辑按钮在上面的循环中禁用两个按钮（添加选择器和添加部分）。但我无法仅禁用/启用生成的特定按钮。 我也想在我的组件中管理它以启用/禁用。 我希望任何人都可以帮助我。

我的表单看起来像这样 -> https://gyazo.com/329e442becd93222d33c15b1232cc9d2

<div formArrayName="sectionList">
    <div *ngFor="let section of myForm.get('sectionList').controls; let i=index" [formGroupName]="i">
      <div formGroupName="section">
        <button mat-button color="primary" (click)="enableSection(i)">Edit</button>    
        <mat-form-field>
          <input matInput placeholder="name" formControlName="name">
          <mat-error *ngIf=""> 
              todo
          </mat-error>
        </mat-form-field>   
        <button mat-raised-button color="warn" (click)="deleteSection(i)" >Delete</button>    
        <button mat-raised-button color="primary" [disabled]="true" (click)="saveSection(i)">Save</button> 
      </div>

      <div formArrayName="selectorList">
        <div *ngFor="let selector of section.controls.selectorList.controls; let j=index" [formGroupName]="j">
          <button mat-button color="primary" (click)="enableSelector(i, j)">Edit</button>    
          <mat-form-field>
            <input matInput placeholder="locator" formControlName="locator" >
          </mat-form-field>
          <mat-form-field>
            <input matInput placeholder="language" formControlName="language" >
          </mat-form-field>            
          <mat-form-field>
            <input matInput placeholder="value" formControlName="value" >
          </mat-form-field> 
          <button mat-raised-button color="warn" (click)="deleteSelector(i,j)">Delete</button> 
          <button mat-raised-button color="primary" [disabled]="isDisabled" (click)="saveSelector(i,j)">Save</button>   
        </div>
        <button mat-raised-button color="primary" (click)="addSelector(i)">Add Selector</button>    
      </div>    
    </div> 
    <button mat-raised-button color="primary" (click)="addSection()">Add Section</button>     
  </div>

 enableSection(i){
    this.sectionForms.controls[i].get('section').enable();
  }

  enableSelector(i, j){
    this.isDisabled = false;
    this.myForm.get('sectionList.' + i + '.selectorList.' + j).enable();
  }

Answer 1

只需添加到您要禁用的按钮[disabled]="rowIWannaDisable === i" 其中i 是*ngFor 的索引，如ngFor="let section of myForm.get('sectionList').controls; let i=index" 和rowIWannaDisable 是您希望禁用按钮的行号。您也可以使用函数而不是 rowIWannaDisable 来动态选择禁用的行。