2

Trabajo con angular y bootstrap; estoy trayendo datos de mi base de datos para la confección de una barra de progreso de habilidades. Uno de esos datos es el porcentaje de la habilidad que se traduce en el grosor de la barra de progreso:

<div class="progress-bar barra" role="progressbar" aria-label="Example with label"
            style="width: {{habilidad.porcentaje}}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span
              class="porcentaje">{{habilidad.porcentaje}}%</span>
          </div>

introducir la descripción de la imagen aquí Haciéndolo de ese modo funciona. Pero, pese a que levanta el servidor y se observa el porcentaje adecuado de las barras de progreso,angular me tira un error en el html: property value expectedcss(css-propertyvalueexpected). Hay alguna forma más adecuada de pasarle la interpolación o el dato del porcentaje que viene de la BD?

1 respuesta 1

1

suponiendo que tu variable habilidad.porcentaje esté correcto y que te devuelva un valor: te recomiendo usar la directiva ngStyle, donde quedaría de la siguiente forma. también te recomiendo revisar la documentación de angular para entender mejor .

  <div class="progress-bar barra" role="progressbar" aria-label="Example with label"
        [ngStyle]="{'width.%':habilidad.porcentaje}" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span
              class="porcentaje">{{habilidad.porcentaje}}%</span>
          </div>

1
  • 1
    Muchas gracias es lo que necesitaba. Sabía que debía utilizar el ngStyle. Pero recién estoy aprendiendo a usarlo. Seguiré viendo en la documentación de angular Commented el 2 feb. 2023 a las 19:34

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.