Блог

Я работаю над проектом 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 флажка для остальных столбцов. Я хотел бы изначально отключить эти флажки, которые следуют за именем строки.

Если установлен флажок в разделе выбрать столбец (первый столбец), то я хотел бы включить остальные три флажка для этой конкретной строки, в то время как эти 3 флажка для других столбцов все еще должны быть отключены, поскольку количество строк является динамическим.

FormGroups и FormControls — хорошее решение для того, что вам нужно. вы можете управлять ими в группе или по одному. и подписаться на изменения и статус.(не забудьте отменить отправку после добавления)

https://stackblitz.com/edit/angular-material-starter-qxj6he?file=app/app.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 amp;amp; c.disabled) {
        c.enable();
      } else if (!status amp;amp; 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>