1

estoy tratando de conectar mi back con el front pero con este componente estoy teniendo problemas me tira estos errores: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{skills.porcentaje}}] in /src/app/componentes/skills/skills.component.html@6:19 Type '{ "": any; }' is not assignable to type 'number'.

Este es el código html... es un array que trae una lista del componente.ts las importaciones están todas bien porque antes de conectar con el back funcionaba perfecto el problema es que lo quiero hacer dinámico y no me trae los datos de la base de datos.

    <div class="text-center col-sm-5 col-md-4 col-lg-4">
    <circle-progress
        [percent]="{{skills.porcentaje}}"
        [radius]="{{skills.radio}}"
        [outerStrokeWidth]="{{skills.anchoTrazo}}"
        [outerStrokeColor]="'{{skills.colorTrazo}}'"
        [imageSrc]="'{{skills.imgSkill}}'"
        [imageHeight]="{{skills.imgAlto}}"
        [imageWidth]="{{skills.imgAncho}}"
        [showImage]="{{skills.showImg}}"
        [showBackground]="{{skills.showFondo}}"
        [animation]="{{skills.animacion}}"
        [animationDuration]="{{skills.animacionTime}}"
    ></circle-progress>
    </div> 
</div>```

1 respuesta 1

0

Elimina las dobles llaves en todos los atributos, no son necesarias. La sintaxis de las plantillas de Angular funciona así:

HTML estándar

<elemento dato="valor">

Sin novedades con esta sintaxis, tienes un atributo llamado dato con el valor "valor" (un string).

Interpolación

<elemento dato="{{prop}}">

Asume que tienes algo como

class MiComponente {
  public prop;
  ...
}

Y estás dando al atributo "estándar" dato el valor que tenga la propiedad de tu componente con nombre prop. Como es un atributo "estándar" de HTML, este sólo puede ser un string, así que si propes un objeto, acabarás teniendo en el HTML generado lo siguiente:

<elemento dato="[object Object]">

Data Binding

<elemento [dato]="prop">

Estás pasando a un componente asociado con la etiqueta elemento el valor que se encuentra el la propiedad del componente padre con el nombre prop. Se espera que el componente hijo declare una propiedad dato decorada con @Input() (o una propiedad con otro nombre pero decorada con @Input('dato'))

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.