es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo aplicar varias propiedades de objeto a ngStyle

11 Jul, 2023 Programación

Tengo un elemento en mi HTML como este:

<span [ngstyle]="{'background': getColor(selectedOption.type)}">BLAH</span>

Tengo una condición en mi archivo TS como esta:

public getColor(type: string) {
    switch (type) {
    case 'General':
        return {background: '#ffe5d7', color: '#e7560a'};
    case 'Interview':
        return {background: '#ffe5d7', color: '#e7560a'};
    // más código
}

Básicamente, si el usuario selecciona “General”, quiero que el color de fondo y el color de fuente correctos sean devueltos por la función y aplicados al elemento usando ngStyle. Pero esto no está funcionando correctamente. ¿Qué estoy haciendo mal?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Respuesta:

    El ngStyle espera un objeto con propiedades CSS como su valor, pero tu función getColor devuelve un objeto con las propiedades background y color. Para solucionar este problema, modifica tu método getColor para que solo devuelva la propiedad background.

    Por ejemplo:

    public getColor(type: string) {
  switch (type) {
    case 'General':
      return '#ffe5d7';
    case 'Interview':
      return '#ffe5d7';
    // más código
  }
}

    Luego, en tu HTML, aplica el valor devuelto a la propiedad background-color del objeto ngStyle, de esta manera:

    <span [ngstyle]="{'background-color': getColor(selectedOption.type)}">BLAH</span>

    Esto debería establecer el color de fondo del elemento span según el tipo seleccionado. Si también necesitas establecer el color de la fuente, puedes usar la propiedad color y aplicar un atributo ngStyle separado:

    <span [ngstyle]="{'background-color': getColor(selectedOption.type), 'color': getFontColor(selectedOption.type)}">BLAH</span>

    En este ejemplo, el método getFontColor devolvería el color de fuente apropiado según el tipo seleccionado.

Comments are closed.