Angular - Como puedo manipular multiples condicionales de un boton del lado del componente

 
Vista:
Imágen de perfil de Dagner
Val: 4
Ha aumentado 1 puesto en Angular (en relación al último mes)
Gráfica de Angular

Como puedo manipular multiples condicionales de un boton del lado del componente

Publicado por Dagner (2 intervenciones) el 20/04/2021 15:26:58
Hola tengo el siguiente problema y me gustaría saber si hay alguna forma de poder mejorar este código. Tengo un botón dinámico dentro de un ciclo, que para que se muestre debe cumplir varias condiciones. Como son muchos if me gustaría saber si hay alguna forma de poder controlarlo desde el lado del componente. Intenté con un getter pero como tengo que pasarle argumentos no se como hacerlo. La idea es dejar el html lo mas limpio posible para que pueda ser mas fácil su mantenimiento. Aquí les dejo un ejemplo. Gracias por su ayuda

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<button mat-icon-button *ngIf="
        row.id_centro == idCentro &&
        row.solicitud == 0 &&
        row.id_lista == null &&
        !rolDador
      " [disabled]="
        row.contrata == 1 ||
        row.bloqueado == 1 ||
        rolAdminMuvin ||
        row.viajes_mios == 0 ||
        (!roloperador && row.id_operador > 0)
      " (click)="goAsignarViaje(row)">
      <mat-icon color="asignarviaje" matTooltip="Asignar Viajes" style="font-size: 32px;">
        local_shipping</mat-icon>
      <span class="notification-number mat-bg-primary iconoCamionActivo"
        *ngIf="
          row.difundido == 1 ||
          row.difundido == 4 ||
          row.difundido == 5 ||
          row.difundido == 7
        ">
        {{ row.postulados }}
      </span>
</button>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique
Val: 11
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

Como puedo manipular multiples condicionales de un boton del lado del componente

Publicado por Enrique (8 intervenciones) el 28/04/2021 19:20:37
Si se puede pero te recomiendo hacerlo desde ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//components.ts
public showIconBtn():bool{
return (row.id_centro == idCentro &&
        row.solicitud == 0 &&
        row.id_lista == null &&
        !rolDador);
}
 
public disabledIconBtn():bool{
return (row.contrata == 1 ||
        row.bloqueado == 1 ||
        rolAdminMuvin ||
        row.viajes_mios == 0 ||
        (!roloperador && row.id_operador > 0));
}
 
public showNotify():bool{
return ( row.difundido == 1 ||
          row.difundido == 4 ||
          row.difundido == 5 ||
          row.difundido == 7);
}
 
//en html
<button mat-icon-button *ngIf="showIconBtn()" [disabled]="disabledIconBtn()" (click)="goAsignarViaje(row)">
 
<span class="notification-number mat-bg-primary iconoCamionActivo" *ngIf="showNotify()">{{ row.postulados }}</span>


Es más limpio, más escalable
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar