0

tengo una tabla paginada como muestro en el codigo pero estoy intentando deshabilitar la opcion "Custodiar" de acuerdo al valor que vaya tomando la variable "Deshabilitar"


              <table class="table table-striped table-no-bordered table-hover" id="tbGarantia" style="width:100%"  >
                <tfoot>
                  <tr>
                    <th class="text-center">{{ HeaderGarantia[0] }}</th>
                    <th class="text-center">{{ HeaderGarantia[1] }}</th>
                    <th class="text-center">{{ HeaderGarantia[2] }}</th>
                    <th class="text-center">{{ HeaderGarantia[3] }}</th>
                    <th class="text-center">{{ HeaderGarantia[4] }}</th>
                    <th class="text-center">{{ HeaderGarantia[5] }}</th>
                    <th class="text-center">{{ HeaderGarantia[6] }}</th>
                    <th class="text-center">{{ HeaderGarantia[7] }}</th>

                  </tr>
                </tfoot>
                <tbody>
                  <tr *ngFor="let row of ListarGarantia" [ngClass]="{'info': row.estado_Vigencia=== 'GARANTIA RENOVADA'}">

                    <td class="text-center " style="font-weight:bold">{{row.numero_Garantia}}</td>
                    <td class="text-center ">{{row.objeto_Garantia}}</td>
                    <td class="text-center">{{row.fecha_Inicio | date:'dd/MM/yyyy'}}</td>
                    <td class="text-center">{{row.fecha_Vencimiento | date:'dd/MM/yyyy'}}</td>
                    <td class="text-center">{{row.asunto_Vigencia}}</td>
                    <td class="text-center" [ngClass]="{' text-success' : row.estado_Vigencia=== 'VIGENTE','text-danger' : row.estado_Vigencia === 'VIGENCIA CONCLUIDA','text-warning  ' : row.estado_Vigencia === 'POR VENCER'}">{{row.estado_Vigencia}}</td>
                    <td class="text-center">{{row.custodio}}</td>
                    <td class="text-center" >

                      <ng-container  [disabled]="Deshabilitar" >
                        <a rel="tooltip" title="Custodiar" class="btn  btn-success btn-simple btn-xs" [routerLink]="['ingresoGarantia', row.id_Garantia, row.numero_Garantia]" >
                          <i class="fa fa-archive"></i>
                        </a>
                      </ng-container>                      
                    </td>
                  </tr>
                </tbody>
              </table>

pero no me acepta usar el disabled en esa etiqueta habra alguna otra manera de hacerlo

3
  • Podrias compartirnos donde tenes definida la variable seteada y como toma los valores? el 3 jul. 2020 a las 18:20
  • el atributo disabled es para input, textarea, select, button, option no para otras etiquetas. Aquí tienes la documentación developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled. Puedes explicar lo que quieres hacer? Quieres que no se pueda clicar el link?
    – hawks
    el 3 jul. 2020 a las 19:08
  • asi es lo que quiero hacer es que se deshabilite dependiendo que valor tome la variable "Deshabilitar" el 3 jul. 2020 a las 19:44

1 respuesta 1

0

Tienes que des habilitarlo por css, puedes poner un ngclass con la condición o con la clase quemada

Quemada

<a class="isDisabled" href="https://unfetteredthoughts.net">Disabled Link</a>

Ngclass

<a [ngClass]="{ isDisabled: CONDICION }" href="">Disabled Link</a>

En el apartado de css agregas la clase

.isDisabled {
  pointer-events: none;
  cursor: not-allowed;
}

.isDisabled:hover {
  cursor: not-allowed;
}

Para tu ejemplo en concreto

<div [ngClass]="{ isDisabled: Deshabilitar }">
  <a  rel="tooltip" title="Custodiar" class="btn  btn-success btn-simple btn-xs" [routerLink]="['ingresoGarantia', row.id_Garantia, row.numero_Garantia]" >
    <i class="fa fa-archive"></i>
  </a>
</div>

o si lo prefieres sobre el propio enlace

<a [ngClass]="{ isDisabled: Deshabilitar }" rel="tooltip" title="Custodiar" class="btn  btn-success btn-simple btn-xs" [routerLink]="['ingresoGarantia', row.id_Garantia, row.numero_Garantia]" >
  <i class="fa fa-archive"></i>
</a>

Te recomiendo esta documentación: https://css-tricks.com/how-to-disable-links/

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.