javascript - 根据其值检查和取消选中复选框
问题描述
我需要你们的帮助,伙计们!
我正在使用 Angular 为论坛应用程序开发用户管理员。在一个部分中,我有一个 Angular Material 多选项选择,如下所示:
我从我的 MySQL 数据库中获得了关于选择的选项,每个选项都是我的数据库中的一个字段或列,我还带来了每个用户寄存器中每列的值,例如,“autoevalacion”= true。
我想要实现的是,如果值为真,则检查多选项选择中的每个复选框,如果值为假,则为空白。
我怎样才能做到这一点?
我尝试使用以下代码执行此操作,但未选中复选框,仅显示该选项,如您在上一张图片中所见。
HTML
<ng-container matColumnDef="foros">
<th mat-header-cell *matHeaderCellDef style="text-align: center;align-items: center">Foros</th>
<td mat-cell *matCellDef="let element">
<mat-form-field>
<mat-label>Foros</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let dato of element.optionsForos" [value]="dato.val">{{dato.label}}</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
TS 文件
public transfromData(datos: Array<any>){
return datos.map(dato => {
dato["optionsForos"] = [
{
val: dato.autoevaluacion,
label: "Autoevaluacion"
},
{
val: dato.rt_funcionarios,
label: "RT_Funcionarios"
},
{
val: dato.reporteadores,
label: "Reporteadores"
},
{
val: dato.reporteadores_gerentes,
label: "Reporteadores_Gerentes"
},
{
val: dato.rt_gerentes,
label: "RT_Gerentes"
},
{
val: dato.contrato_funcionarios,
label: "Contratos_Funcionarios"
},
{
val: dato.rt_jefes,
label: "RT_Jefes"
},
{
val: dato.contrato_gerentes,
label: "Contrato_Gerentes"
},
] ;
console.log(dato)
return dato;
});
}
public async obtenerUsuarios(){
let data;
this.tablaUsuarios = await this.forosServicio.getUsuarios(data);
console.log(this.tablaUsuarios)
this.tablaUsuarios = this.transfromData(this.tablaUsuarios);
this.dataSource = new MatTableDataSource<any>(this.tablaUsuarios);
console.log(this.dataSource)
}
解决方案
您需要将值数组传递给您的情况下的 formControl toppings
,但问题是您传递的所有选择的选项值都是true
或false
(非唯一)
修改您的模板以将每个选项的值对象保持为唯一(我们将使用对选项标签和值都唯一的标签)
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let dato of element.optionsForos" [value]="dato.label">{{dato.label}}</mat-option>
</mat-select>
在您的打字稿代码中手动分配值
public async obtenerUsuarios(){
let data;
this.tablaUsuarios = await this.forosServicio.getUsuarios(data);
console.log(this.tablaUsuarios)
this.tablaUsuarios = this.transfromData(this.tablaUsuarios);
this.dataSource = new MatTableDataSource<any>(this.tablaUsuarios);
console.log(this.dataSource)
// Here manually filter all true `val` map them with the attribute `label` and assign to Select's formControl value `toppings`
this.toppings.setValue(this.tablaUsuarios.optionsForos.filter(opt => opt.val).map(opt => opt.label));
}
因此,在您的代码中,选项的值是label
您的数据结构中的属性,在上面的代码中,我们根据属性过滤哪些值为真val
,然后输出一个数组,其中仅包含那些为真的标签并提供给浇头 formControl .
您的选择需要一个基于您的选项的值。在您的代码中,您的选项是真或假,但不是唯一的,但您的标签是,所以我使用标签作为选项的值(显示和值都使用属性标签)
希望这对你有用
推荐阅读
- python-3.x - Python 3 中 math.log2(x) 的时间复杂度是多少?
- javascript - 在 ES6 中单击时在当前类元素上切换样式
- python - 创建错误条件:google.api_core.exceptions.NotFound: 404 Not found: URI
- jquery - SharePoint 2013 REST API Query Throws an Error Every Time I Try to Set a Variable to a Returned Value
- c - C 打印的整数与它在 Watches 上显示的数字不同。这是为什么?
- sql - ORA-01403: 未找到数据 ORA-06512
- android - 使用片段测试的片段测试错误:无法实例化检测
- c++ - C++ - Why isn't the unicode output correct?
- cloud - 如何确保谷歌计算引擎上的防篡改/防篡改启动盘?
- sql - T-SQL query to summarize sales for ALL YEARS: with total per month per year, and cumulative monthly amounts