No se puede enlazar a 'aria-valuenow' ya que no es una propiedad conocida de 'div'

91

¿Qué pasa con el siguiente código? Me pasó cuando intenté asignar una expresión a un elemento,

<div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="{{MY_PREC}}" aria-valuemin="0" aria-valuemax="100" >
    {{MY_PREC}}
  </div>

también probado como

[aria-valuenow]={{MY_PREC}}

Parece que pasa desde RC5

¿algunas ideas?

El irreal
fuente

Respuestas:

202

El enlace Angular2 es un enlace de propiedad por defecto. No hay aria-valuenowpropiedad sobre divsi no hay ninguna directiva o componente aplicado que tenga tal@Input()

Utilice en su lugar enlace de atributo explícito

attr.aria-valuenow="{{MY_PREC}}" 

o

[attr.aria-valuenow]="MY_PREC" 
Günter Zöchbauer
fuente
¡Gracias! ¿Qué pasa si necesito hacer algo como esto:style="width:{{current_data/current_max_data | percent:'1.0-1'}}"
TheUnreal
7
[ngStyle] = "{width: current_data / current_max_data | percent: '1.0-1'}"
Günter Zöchbauer
2
para mí funcionó `[style.width] =" current_data / current_max_data | percent: '1.0-1' "`
alexopoulos7
1
Tu publicación me salvó el día. Estoy usando el acordeón bootstrap 4 con <div id="accordion" role="tablist" aria-multiselectable="true">. Necesito poner mi Id en aria-controls en una etiqueta y en div aria-labelledby. Para un [attr.aria-controls]="'collapse'+psl.Id"y para div [attr.aria-labelledby]="'heading'+psl.Id"funcionó para mí.
aprendizaje ...
Lo siento, esta respuesta no me queda muy clara, ¿necesitamos una @Inputllamada o no?
0

¿Ha implementado las nuevas cosas ngModule?

Si es así, el orden de las declaraciones tiene un impacto en cómo debería funcionar la aplicación. Tal vez debería intentar declarar sus directivas en otro orden

Alexis Le Gal
fuente
0

En archivo .ts:

public MY_PREC = '55';

En archivo .html:

<div class="progress-bar progress-bar-striped active" role="progressbar"
     [attr.aria-valuenow]="MY_PREC" [style.width]="MY_PREC+'%'" aria-valuemin="0" aria-valuemax="100" >
     {{MY_PREC}}
</div>
ShivarajRH
fuente