动态禁用/启用 Angular 表行中的复选框

Question

我正在开发一个 Angular 项目，我在其中动态地将行添加到表中。

我的html代码

<table class="table table-sm table-bordered"
    style="width:100%; margin-bottom: 0em">
    <thead>
            <tr class="bg-header">
                    <th>
                            Select
                    </th>
                    <the>
                            Level
                    </th>
                    <th>
                            Config
                    </th>
                    <th>
                            Read
                    </th>
                    <th>
                            Value
                    </th>
            </tr>
    </thead>
    <tbody>
            <tr *ngFor = "let applicableLevel of applicableLevelsConfigList">
                    <td>
                            <mat-checkbox>
                            </mat-checkbox>
                    </td>
                    <td>
                            {{applicableLevel.Nm}}
                    </td>
                    <td>
                            <mat-checkbox [diabled]="true">
                            </mat-checkbox>
                    </td>
                    <td>
                            <mat-checkbox [diabled]="true">
                            </mat-checkbox>
                    </td>
                    <td>
                            <mat-checkbox [diabled]="true">
                            </mat-checkbox>
                    </td>
            </tr>        
    </tbody>
</table>

我在行的开头有一个复选框，然后是行名，然后是其余列的 3 个复选框。我想最初禁用行名称之后的这些复选框。

如果选中列（第一列）下的复选框，那么我想为该特定行启用其他三个复选框，而其他列的这三个复选框仍然必须禁用，因为行数是动态的。

Answer 1

FormGroups 和 FormControls 是满足您需要的很好的解决方案。 您可以分组或一个一个地控制它们。 并订阅更改和状态。（确保在订阅后取消订阅）

https://stackblitz.com/edit/angular-material-starter-qxj6he?file=app%2Fapp.component.ts

export class AppComponent implements OnDestroy {
  unsubscribe$: Subject<void> = new Subject<void>();

  applicableLevelsConfigList: {
    formGroup: FormGroup;
    select: FormControl;
    level: FormControl;
    config: FormControl;
    read: FormControl;
    value: FormControl;
  }[] = [];
  constructor() {
    this.add();
  }
  add() {
    const select = new FormControl({ value: false, disabled: false }, []);
    const level = new FormControl({ value: "", disabled: true }, []);
    const config = new FormControl({ value: false, disabled: true }, []);
    const read = new FormControl({ value: false, disabled: true }, []);
    const value = new FormControl({ value: false, disabled: true }, []);

    const formGroup = new FormGroup({ select, level, config, read, value });

    select.valueChanges.pipe(takeUntil(this.unsubscribe$)).subscribe(selectValue => {
      console.log(selectValue);
      if(!selectValue){
        // you can reset them here if you want to check them as false if they got 
        // disabled.
        // level.setValue('');
        // config.setValue(false);
        // read.setValue(false);
        // value.setValue(false);
      }
      this.toggleControllers(!!selectValue, [config, read, value]);
    });
    this.applicableLevelsConfigList.push({
      formGroup,
      select,
      level,
      config,
      read,
      value
    });
  }
  
  toggleControllers(status: boolean, controllers: FormControl[]) {
    controllers.forEach(c => {
      if (status && c.disabled) {
        c.enable();
      } else if (!status && c.enabled) {
        c.disable();
      }
    });
  }

    ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

<button (click)="add()" mat-button color="primary" >ADD</button>

<table class="table table-sm table-bordered" style="width:100%; margin-bottom: 0em">
    <thead>
        <tr class="bg-header">
            <th>
                Select
            </th>
            <th>
                Level
      </th>
      <th>
                    Config
      </th>
      <th>
                    Read
      </th>
      <th>
                    Value
      </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let applicableLevel of applicableLevelsConfigList">
            <td>
                <mat-checkbox [formControl]="applicableLevel.select">
                </mat-checkbox>
            </td>
            <td>
                {{applicableLevel.level.value}}
            </td>
            <td>
                <mat-checkbox [formControl]="applicableLevel.config">
                </mat-checkbox>
            </td>
            <td>
                <mat-checkbox [formControl]="applicableLevel.read">
                </mat-checkbox>
            </td>
            <td>
                <mat-checkbox [formControl]="applicableLevel.value">
                </mat-checkbox>
            </td>
        </tr>
    </tbody>
</table>

<style>
  tr, th, td{
    border: 1px solid black;
    padding: 1rem;
  }
  
</style>

<div *ngFor="let applicableLevel of applicableLevelsConfigList">
  <code>
    <pre>
      {{applicableLevel.formGroup.value | json}}
    </pre>
  </code>
</div>