Nie można powiązać z „aria-valueenow”, ponieważ nie jest to znana właściwość „div”


91

Co jest nie tak z następującym kodem? Przydarzyło mi się, gdy próbowałem przypisać wyrażenie do elementu,

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

próbowałem również jako

[aria-valuenow]={{MY_PREC}}

Wydaje się, że to się dzieje od czasu RC5

jakieś pomysły?

Odpowiedzi:


202

Powiązanie Angular2 jest domyślnie powiązaniem właściwości. Nie ma aria-valuenowwłaściwości włączonej, divjeśli nie ma zastosowanej dyrektywy lub komponentu, który ma taki plik@Input()

Zamiast tego użyj jawnego powiązania atrybutów

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

lub

[attr.aria-valuenow]="MY_PREC" 

Dzięki! A jeśli będę musiał zrobić coś takiego: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
dla mnie działało `[style.width] =" current_data / current_max_data | percent: '1.0-1' "` `
alexopoulos7

1
Twój post uratował mi dzień. Używam akordeonu bootstrap 4 z <div id="accordion" role="tablist" aria-multiselectable="true">. Muszę umieścić mój identyfikator w kontrolkach arii na etykiecie i etykiecie div aria. Dla a [attr.aria-controls]="'collapse'+psl.Id"i dla div [attr.aria-labelledby]="'heading'+psl.Id"działały dla mnie.
nauka ...

Przepraszam, ta odpowiedź nie jest dla mnie zbyt jasna, potrzebujemy @Inputtelefonu, czy nie?

0

Czy zaimplementowałeś nowe elementy ngModule?

Jeśli tak, kolejność deklaracji ma wpływ na sposób działania aplikacji. Może powinieneś spróbować zadeklarować swoje dyrektywy w innej kolejności


0

W pliku .ts:

public MY_PREC = '55';

W pliku .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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.