Bu tanılama, bir etkisi olması için CSS birimi gerektiren bir CSS uzunluk özelliğine sayısal bir değer bağlandığında bunu tespit eder.
<!-- Çıplak bir sayı bağlamak – görsel bir etkisi yok -->
<div [style.width]="500"></div>
<!-- Sayısal bir string bağlamak – bunun da etkisi yok -->
<div [style.padding]="'20'"></div>Bunda ne yanlış?
width, height, margin, padding, font-size ve diğer birçok CSS uzunluk özelliği, etkili olmak için bir birim (örneğin px, em, %, rem) gerektirir. 500 gibi düz bir sayı bağlamak özelliği "500" string'ine ayarlar; tarayıcılar bunu geçersiz bir değer olarak değerlendirir ve sessizce yok sayar. Öğe, stil hiç uygulanmamış gibi render edilir.
Bunun yerine ne yapmalıyım?
Angular şablonlarında birimli bir uzunluk değeri bağlamanın iki yaygın yolu vardır.
Birim eki kısayolunu kullanın
.unit ek sözdizimini kullanarak istediğiniz birimi doğrudan binding adına ekleyin:
<div [style.width.px]="500"></div>
<div [style.padding.rem]="1.5"></div>
<div [style.margin-top.%]="10"></div>Birimi zaten içeren bir string bağlayın
Değeri dinamik olarak oluşturmanız gerekiyorsa bunun yerine birimi içeren tam bir CSS değer string'i bağlayın:
<div [style.width]="'500px'"></div>
<div [style.padding]="myPadding + 'px'"></div>Yapılandırma gereksinimleri
Herhangi bir genişletilmiş tanılamanın verilmesi için strictTemplates etkinleştirilmelidir.
numericCssPropertyRequiresUnit için strictTemplates dışında ek bir gereksinim yoktur.
Bunu önleyemezsem ne olur?
Bu tanılama, projenin tsconfig.json dosyası düzenlenerek devre dışı bırakılabilir:
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"numericCssPropertyRequiresUnit": "suppress"
}
}
}
}Daha fazla bilgi için genişletilmiş tanılama yapılandırması bölümüne bakın.