2

Soy nueva en programación en Angular y necesito llevar a cabo las operaciones de inserción, modificación y borrado en una mat-table de un mat-input, dependiendo de si el valor del elemento tiene ya un valor o no.

Tengo el siguiente código en el html:

<ng-container matColumnDef="idCodCargAcad">
      <mat-header-cell *matHeaderCellDef> Clave </mat-header-cell>
      <mat-cell *matCellDef="let element let i=index;">
        <mat-form-field floatLabel="never" appearance="none">
           <input matInput  placeholder="Clave" [value]="element.idCodCargAcad"
            [(ngModel)]="element.idCodCargAcad"
            [disabled]="(element.idCodCargAcad !== null)?true:false">
        </mat-form-field>
      </mat-cell>
</ng-container>

Pero no me habilita el elemento cuando no es nulo, lo deja siempre deshabilitado. ¿Alguien me podría orientar sobre qué hacer por favor?

Actualmente se visualiza así: Elemento Clave ya deshabilitado

Pero necesito que cuando se agregue una fila y el elemento Clave obviamente sea nulo, cambie a estar habilitado.

Los datos se pasan a la tabla de Material-Design en el dataSource y se obtienen de una API. Aquí el código:

  // **************** Llamadas a los servicios ****************
  // Función que obtiene las Cargas Académicas

  private fnObtCargAcad(idPrograma: string) { // , arreglo: any
    console.log('Entro a fnObtCargAcad');
    this.svCargAca.fnGetCargAcad(idPrograma).subscribe(data => {
      if (data !== null && data !== undefined) {
        this.svSession.setCookie(data.oEncrip.sEncript);
        this.lsCargAcad = data.oLsCargAcaPro;
        this.sOrder = 'iHrsCredMin';
        this.lsCargAcad = this.Exporter.fnSortJSON(this.lsCargAcad, this.sOrder, !this.bReverse);
        // this.fnFiltroCAcad(arreglo);
        this.mDatCargAcad = new MatTableDataSource(this.lsCargAcad);
        console.log(this.mDatCargAcad.data); // obtiene los datos del arreglo
      }
    }, error => {
      alertify.notify(this.Exporter.fnMensajes(error), 5);
    });
  }

No sé si requieren más información para ayudarme. La aplicación se está desarrollando en Angular 5.

2
  • de donde viene element ?
    – Picardia
    el 29 mar. 2020 a las 20:31
  • Lo obtengo de una Web Api y paso los datos en un dataSource.
    – Laetitia89
    el 29 mar. 2020 a las 20:38

2 respuestas 2

0

Si entendi bien, la logica deberia ser la siguiente

 element.idCodCargAcad === null ? true : false

Porque disable en caso de ser positivo (true) lo deshabilita y en caso de no serlo (false) lo activa, lo que sucede es que si no es nulo retornara true y por lo tanto estará deshabilitado.

0

Usa este código:

[disabled]="element.idCodCargAcad">

Javascript interpreta una variable con valor como true, y una variable null o undefined como false.

3
  • Gracias a ambos, pero no funcionó. Lo que ser requiere es que cuando se llena la mat-table el input del element.idCodCargAcad sea deshabilitado, pero si se agrega una fila a la mat-table éste cambie a habilitado (por eso la necesidad de habilitarlo cuando sea nulo y deshabilitarlo cuando no sea nulo).
    – Laetitia89
    el 29 mar. 2020 a las 20:59
  • Entiendo. Actualicé la respuesta. Prueba removiendo el operador de negación !.
    – Lobos
    el 29 mar. 2020 a las 21:06
  • "Prueba esto" parece más un comentario que una respuesta. Cuál es la explicación de lo que hace ese código? el 30 mar. 2020 a las 0:20

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.