Não é possível vincular a 'aria-valuenow', pois não é uma propriedade conhecida de 'div'

91

O que há de errado com o código a seguir? Aconteceu comigo quando tentei atribuir uma expressão a um elemento,

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

também tentei como 

[aria-valuenow]={{MY_PREC}}

Parece que isso acontece desde RC5

alguma ideia?

angular TheUnreal
fonte

Respostas:

206

A vinculação Angular2 é uma vinculação de propriedade por padrão. Não há aria-valuenowpropriedade ativada divse não houver diretiva ou componente aplicado que tenha tal@Input()

Use a vinculação de atributo explícita

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

ou

[attr.aria-valuenow]="MY_PREC"
Günter Zöchbauer
fonte
Obrigado! E se eu precisar fazer algo assim: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 mim funcionou `[style.width] =" current_data / current_max_data | percent: '1.0-1' "`
alexopoulos7
1
Sua postagem salvou o dia para mim. Estou usando o bootstrap 4 acordeão com <div id="accordion" role="tablist" aria-multiselectable="true">. Preciso colocar meu id em aria-controls em uma tag e em div aria-labelledby. Para um [attr.aria-controls]="'collapse'+psl.Id"e para o div [attr.aria-labelledby]="'heading'+psl.Id"funcionou para mim.
aprendendo ...
Desculpe, esta resposta não está muito clara para mim, precisamos de uma @Inputchamada ou não?
0

Você implementou o novo material do ngModule?

Nesse caso, a ordem das declarações tem um impacto sobre como o aplicativo deve funcionar. Talvez você deva tentar declarar suas diretivas em outra ordem

Alexis Le Gal
fonte
0

No arquivo .ts:

public MY_PREC = '55';

No arquivo .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
fonte