动态禁用/启用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个复选框。我想在最初禁用行名称后面的这些复选框。

如果选中了select column(第一列(下的复选框，那么我希望为该特定行启用其他三个复选框，而其他列的这三个复选盒仍然必须禁用，因为行数是动态的。

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>