這項診斷會偵測把數值繫結到需要 CSS 單位才會有效果的 CSS 長度屬性的情況。
<!-- Binding a bare number – has no visual effect -->
<div [style.width]="500"></div>
<!-- Binding a numeric string – also has no effect -->
<div [style.padding]="'20'"></div>這樣寫有什麼問題？
width、height、margin、padding、font-size 等 CSS 長度屬性需要單位（例如 px、em、%、rem）才會生效。把像 500 這樣的純數字繫結上去，會把屬性設成字串 "500"，瀏覽器會將它視為無效值並默默忽略。該元素呈現出來的樣子，就會像是這個樣式從未套用過一樣。
我應該怎麼做？
在 Angular 範本中，有兩種慣用方式可以繫結帶有單位的長度值。
使用單位後綴的簡寫
使用 .unit 後綴語法，把想要的單位直接附加在繫結名稱後面：
<div [style.width.px]="500"></div>
<div [style.padding.rem]="1.5"></div>
<div [style.margin-top.%]="10"></div>繫結已包含單位的字串
如果你需要動態組合值，就改為繫結完整的 CSS 值字串：
<div [style.width]="'500px'"></div>
<div [style.padding]="myPadding + 'px'"></div>設定需求
任何擴充診斷要發出訊息，都必須啟用 strictTemplates。
numericCssPropertyRequiresUnit 除了 strictTemplates 之外，沒有其他額外需求。
如果無法避免，該怎麼辦？
可以透過編輯專案的 tsconfig.json 檔案來停用這項診斷：
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"numericCssPropertyRequiresUnit": "suppress"
}
}
}
}詳情請見擴充診斷設定。