根据其值检查和取消选中复选框

Question

我需要你们的帮助，伙计们！

我正在使用 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)
  }

Answer 1

您需要将一个值数组传递给您在toppings 的情况下拥有的formControl，但问题是您传递的所有选择的选项值都是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。

您的选择需要一个基于您的选项的值。在您的代码中，您的选项是真或假，但不是唯一的，但您的标签是，所以我使用标签作为选项的值（显示和值都使用属性标签）

希望这对你有用