1

Estoy desarrollando una app en Angular, esta posee un admin de usuario el cual contiene un select multi-opcion para seleccionar o deseleccionar los foros a los cuales tendra acceso cada usuario registrado en la BD. El backend es por medio de Flask(Python), a lo cual una funcion de angular me trae los registros de la BD. Sin embargo, intente meterle una funcion para darle formato a lo que se trae de la BD antes de insertarlo en la tabla, esta crea un elemento adicional dentro del array llamado optionsForos que es otro array pero solo con los campos de los foros. A continuacion muestro codigo e imagenes para un mejor entendimiento.

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 optionsForos" [value]="dato.val">{{dato.label}}</mat-option>
      </mat-select>
      </mat-form-field></td>
  </ng-container>

TS

  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)
    // console.log(this.optionsForos)
  }


  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;

    });

  }

Lo que hace la funcion de transform como habia comentado es agregar optionsForos

introducir la descripción de la imagen aquí

como puedo obtener los valores de ese array optionsForos para que el html del select puede leerlo y me salgan las opcion en el.

1
  • Parece que ese valor obtenido en console.log(this.dataSource) es el primer elemento (0) del primer elemento de una matriz, por lo que quizá quieras decir this.dataSource[0][0]["optionsForos"] en vez de this.dataSource["optionsForos"].
    – franmost
    Commented el 17 sept. 2019 a las 10:40

1 respuesta 1

3

El problema que estás teniendo es que en el template HTML estás iterando sobre una variable llamada optionForos que realmente no tienes.

Deberías o bien poner

<mat-option *ngFor="let dato of tablaUsuarios?.optionsForos" [value]="dato.val">{{dato.label}}</mat-option>

O bien crear la variable y usarla de esa manera

this.optionForos = this.tablaUsuarios.optionForos;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.