[attr.width.px] can't work in angular9

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

[pkozlowski-opensource]

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 attribute

What 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]

[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?