mardi 17 septembre 2019

Checking and Uncheckind a Checkbox according to its value

I need your help, guys!

I am developing a User Administrator for a forums app with Angular. In a section i have an Angular Material multi option select like this:

enter image description here

I am getting the options on the select from my MySQL DB, each option is a field or column in my DB, i am also bringing the value of each column in each user register, for example, "autoevaluacion" = true.

what i want to achieve is that every checbox in the multi option select get checked if the value is true or get in blank if its false.

How can i do that?

I tried to do it with the following code but checkboxes dont get checked, just the option appear as you can see in the previous pic.

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"></mat-option>
              </mat-select>
              </mat-form-field></td>
          </ng-container>

TS File

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)

  }




Aucun commentaire:

Enregistrer un commentaire