'Div'in bilinen bir özelliği olmadığı için' aria-worthenow'a bağlanılamıyor


91

Aşağıdaki kodun nesi var? Bir öğeye bir ifade atamaya çalıştığımda bana Hapenned,

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

ayrıca denedi

[aria-valuenow]={{MY_PREC}}

RC5'ten beri olmuş gibi görünüyor

herhangi bir fikir?

Yanıtlar:


203

Angular2 bağlama, varsayılan olarak özellik bağlamadır. Hiçbir yoktur aria-valuenowmülkiyet divhiçbir direktif veya bileşen uygulandığı takdirde öyle bir vardır@Input()

Bunun yerine açık öznitelik bağlamayı kullanın

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

veya

[attr.aria-valuenow]="MY_PREC" 

Teşekkürler! Ya böyle bir şey yapmam gerekirse:style="width:{{current_data/current_max_data | percent:'1.0-1'}}"
TheUnreal

7
[ngStyle] = "{width: current_data / current_max_data | yüzde: '1.0-1'}"
Günter Zöchbauer

2
benim için çalıştı "[style.width] =" current_data / current_max_data | yüzde: '1.0-1' "` `
alexopoulos7

1
Gönderiniz günü benim için kurtardı. İle bootstrap 4 akordiyon kullanıyorum <div id="accordion" role="tablist" aria-multiselectable="true">. Kimliğimi bir etiketteki arya kontrollerine ve div aria etiketli olarak koymam gerekiyor. A [attr.aria-controls]="'collapse'+psl.Id"ve for div [attr.aria-labelledby]="'heading'+psl.Id"benim için çalıştı.
öğreniyor ...

Üzgünüm, bu cevap benim için çok net değil, @Inputaramaya ihtiyacımız var mı yok mu?

0

Yeni ngModule öğelerini uyguladınız mı?

Öyleyse, beyanların sırası uygulamanın nasıl çalışması gerektiğini etkiler. Belki de direktiflerinizi başka bir sırada açıklamaya çalışmalısınız


0

.Ts dosyasında:

public MY_PREC = '55';

.Html dosyasında:

<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>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.