1

Tengo este fragmento de código

[ngClass]="{ 'selected': isQuestionDoubtful, 'click-denied': this.answer?.answerId !== null, 'click-allowed': this.answer?.answerId === null }"

Pero no me parece del todo correcto ya que si quiero asignar otra clase distinta cuando answerId sea null tengo que añadir con otra coma la condición contraria por lo que pierde eficiencia y legibilidad.

Me gustaría saber si existe la posibilidad de encadenar varias operaciones ternarias y a ser posible combinarlas con la primera condición que tengo sin necesidad de hacerla ternaria. He probado lo siguiente:

[ngClass]="{'selected': isQuestionDoubtful, (this.answer.answerId?'click-denied':'click-allowed')}"

[ngClass]="{'selected': isQuestionDoubtful, this.answer.answerId?'click-denied':'click-allowed'}"

[ngClass]="{isQuestionDoubtful?'selected':'', this.answer.answerId?'click-denied':'click-allowed'}"

Sin embargo ninguna de las 3 opciones me funciona. Qué mas puedo probar?

Gracias

2
  • Has probado con [ngIf]? Commented el 9 may. 2019 a las 7:54
  • No puedo usar ngIf porque ya estoy utilizando ngfor en el mismo bloque @NicolasOñate
    – David
    Commented el 9 may. 2019 a las 7:55

1 respuesta 1

2

Hay una opción sencilla que no suele ser muy comentada en los tutoriales:

<mi-etiqueta [ngClass]="getClass()">
  ...

y luego en tu componente añades ese método, devolviendo las clases que necesites:

getClass() {
  let classes = '';
  if (...) {
    classes = 'selected';
  }
  if (...) {
    classes+=' click-denied';
  }
  return classes;
}

Puedes ver un ejemplo funcionando aquí

2
  • Es una buena alternativa, sin embargo no puedo aceptarlo como solución ya que tiene que haber alguna manera de hacerlo en la propia plantilla encadenando las condiciones, para una etiqueta está bien pero cuando tienes 5 o 6 componentes dentro no me sale a cuento crear tantas funciones para añadir una clase
    – David
    Commented el 10 may. 2019 a las 7:58
  • Ya es cuestión de opiniones, pero entre crear 4 métodos y tener 4 líneas de 200 caracteres en la plantilla, yo siempre elijo lo primero. Otra opción es tener un único método que según un parámetro funcione para uno u otro componente, si hay código común Commented el 10 may. 2019 a las 8:29

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.