Impossible de se lier à 'aria-valuenow' car ce n'est pas une propriété connue de 'div'


91

Quel est le problème avec le code suivant? M'a eu lieu quand j'ai essayé d'assigner une expression à un élément,

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

aussi essayé comme

[aria-valuenow]={{MY_PREC}}

On dirait que ça arrive depuis RC5

des idées?

Réponses:


202

La liaison Angular2 est la liaison de propriété par défaut. Il n'y a pas de aria-valuenowpropriété sur divs'il n'y a pas de directive ou de composant appliqué qui a un tel@Input()

Utilisez plutôt une liaison d'attribut explicite

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

ou

[attr.aria-valuenow]="MY_PREC" 

Merci! Et si je dois faire quelque chose comme ça: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
pour moi a travaillé `[style.width] =" current_data / current_max_data | percent: '1.0-1' "`
alexopoulos7

1
Votre message a sauvé la journée pour moi. J'utilise l'accordéon bootstrap 4 avec <div id="accordion" role="tablist" aria-multiselectable="true">. Je dois mettre mon identifiant dans aria-controls sur une étiquette et dans div aria-labelledby. Pour un [attr.aria-controls]="'collapse'+psl.Id"et pour div a [attr.aria-labelledby]="'heading'+psl.Id"travaillé pour moi.
apprentissage ...

Désolé, cette réponse n'est pas très claire pour moi, avons-nous besoin d'un @Inputappel ou non?

0

Avez-vous implémenté les nouveaux éléments ngModule?

Si tel est le cas, l'ordre des déclarations a un impact sur le fonctionnement de l'application. Vous devriez peut-être essayer de déclarer vos directives dans un autre ordre


0

Dans le fichier .ts:

public MY_PREC = '55';

Dans le fichier .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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.