如何解决动态禁用/启用Angular表行中的复选框
我正在开发一个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个复选框。我想最初禁用这些复选框,它们位于行名之后。
如果选中了选择列(第一列)下的复选框,那么我想为该特定行启用其他三个复选框,而其他列的这三个复选框仍必须禁用,因为行数是动态的。
解决方法
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,[]);
const read = new FormControl({ value: false,[]);
const value = new FormControl({ value: false,[]);
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,value]);
});
this.applicableLevelsConfigList.push({
formGroup,select,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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。