0

estoy intentando crear un Nav Tab desde un bucle con NgFor en Angular 7+ pero cuando intento bindear la propiedad aria-controls me da siempre error, adjunto código y error.

CODIGO

<a *ngFor="let video of videos; let i = index" 
   [ngClass]="{active: i == 0}"
   class="nav-link" 
   id="programación-horaria-tab" 
   data-toggle="pill" 
   href="#programación-horaria" 
   role="tab" 
    aria-controls="{{video.name}}" 
   aria-selected="false">Programación horaria</a>

ERROR

Can't bind to 'aria-controls' since it isn't a known property of 'a'. (" href="#programación-horaria" role="tab" [ERROR ->]aria-controls="{{video.name}}" aria-selected="false">Programación horaria) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:25787) at compiler.js:25697 at Object.then (compiler.js:2418) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25696)

Si lo intento bindear de otra manera me pasa lo mismo adjunto codigo.

CODIGO

<a *ngFor="let video of videos; let i = index" 
                   [ngClass]="{active: i == 0}"
                    class="nav-link" 
                    id="programación-horaria-tab" 
                    data-toggle="pill" 
                    href="#programación-horaria" 
                    role="tab" 
                    [aria-controls]="video.name" 
                    aria-selected="false">Programación horaria</a>

ERROR

Can't bind to 'aria-controls' since it isn't a known property of 'a'. (" href="#programación-horaria" role="tab" [ERROR ->][aria-controls]="video.name" aria-selected="false">Programación horaria "): ng:///AppModule/ProductComponent.html@58:24 at syntaxError (compiler.js:2427) at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20311) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25857) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25844) at compiler.js:25787 at Set.forEach () at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:25787) at compiler.js:25697 at Object.then (compiler.js:2418) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25696)

1
  • 1
    Una opción sería usar ng-bootstrap Commented el 3 ene. 2019 a las 13:42

1 respuesta 1

1

SOLUCION

La solución es la siguiente hay que añadir ATTR. delante del atributo. Angular tiene una norma que es si quieres trabajar con un attributo que no se valorado por el por que como hay tantos y te los puedes inventar si le añades al principio ATTR.nombreAtributo ya puedes bindear este atributo y lo trata como un atributo de el.

[attr.aria-labelledby]="product.name"

Explicacion grafica.

Tenemos un atributo que no trabaja con las directivas de angular ni los bindings.

attr-video-id="553625"

Queremos que este atributo puede bindearse con una variable que tenemos en el lado de TypeScript pero si la encerramos entre [] nos va a dar error por que angular no reconoce que lo que hay dentro de [] sea una directiva suya, esto lo solucionamos añadiendo attr. delante del atributo para decirle a angular que la palabra es un atributo y la trate con tal y poder bindear el contenido y quedaría así.

[attr.attr-video-id]="variable"

Espero haberme explicado bien.

2
  • Hola Agustin, aunque esta respuesta podría servir para resolver el problema planteado en la pregunta, ha sido marcada como de baja calidad debido a su extensión y contenido. Sería ideal que pudieras añadir algo más de información: ¿por qué añadir attr delante del atributo solucionaría el problema? ¿puedes enlazar alguna fuente sobre ello? ¿Cómo sería el código adaptado al código de la pregunta? Lee Cómo responder para más información y completa el recorrido de bienvenida para aprender más sobre el sitio (y ganar una nueva medala).
    – Alvaro Montoro
    Commented el 3 ene. 2019 a las 21:31
  • 1
    Acabo de editar la respuesta, la solución es sencilla y la explicación tambien, añadiendo el ATTR. delante de un atributo que no maneje angular puedes hacer que lo detecte y poder usar el binding de angular. Commented el 4 ene. 2019 a las 6:49

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.