Repository navigation
[attr.width.px] can't work in angular9 #36256
Description
Env
- os: win10
- browser: Chrome 80.0.3987.149（x64)
package.json
"@angular/animations": "^9.0.7",
"@angular/cdk": "^9.1.3",
"@angular/common": "^9.0.7",
"@angular/compiler": "^9.0.7",
"@angular/core": "^9.0.7",
"@angular/forms": "^9.0.7",
"@angular/localize": "^9.0.7",
"@angular/material": "^9.1.3",
"@angular/material-moment-adapter": "^9.1.3",
"@angular/platform-browser": "^9.0.7",
"@angular/platform-browser-dynamic": "^9.0.7",
"@angular/router": "^9.0.7"Desc
<td *ngIf="hasContent(r, c)"
[attr.width.px]="model?.cells[r][c]?.width"
[attr.height.px]="model?.cells[r][c]?.height + (isEditableMode() && last ? 1 : 0)"
Rendering failed because the property was compiled to width.px
Activity
DreamLi1314 commentedon Mar 26, 2020
[style.width.px]="model?.cells[r][c]?.width"and[attr.width]="model?.cells[r][c]?.width"is work for me.But I think this should be a mistake or why doesn't this work in Angular9?
pkozlowski-opensource commentedon Mar 26, 2020
tl;dr; this is not the valid syntax and it just "happened to work" in previous versions of Angular. As @DreamLi1314 suggested you need to use one of:
[style.width.px]="expression"if you want to bind to the CSS style property (probably this is what you want);[att.width]="expression + 'px'"if you want to bind to the width attributeWhat was happening with the VE attribute parser that any suffix would be dropped without any warning ( https://stackblitz.com/edit/angular-9qzvjk) which isn't greatest user experience... I'm going to keep this issue open so we can decide what to do here (probably error when detecting such usage pattern).
DreamLi1314 commentedon Mar 27, 2020
ok, thanks.
8 remaining items
angular-automatic-lock-bot commentedon Aug 8, 2022
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.