Cảnh báo: SafeValue phải sử dụng [tài sản] = ràng buộc

Question

Tôi đang cố gắng để gửi một yếu tố getBoundingClientRect() để thành phần của tôi theo cách này:

<object [fromTop]="element.getBoundingClientRect().top"></object> 

Trong html thành phần của tôi, tôi làm điều này kể từ khi tôi có một lưu ý rằng đó là "không an toàn"

this.fromTop = this.sanitizer.bypassSecurityTrustStyle(this.fromTop); 

<div 
style="position:absolute;top:{{fromTop}}px;">Top:{{fromTop}}</div> 

Nhưng sau khi thêm khử trùng tôi nhận được thông báo sau:

SafeValue phải sử dụng [tài sản] = ràng buộc:

Có vấn đề gì? Làm thế nào tôi có thể để đối tượng của tôi ở vị trí tuyệt đối bằng với đầu: {{fromTop}}px?

Answer 1

{{}} chỉ dành cho chuỗi ràng buộc. Một giá trị khử trùng không phải là một chuỗi đồng bằng nữa và nếu bạn sử dụng {{}} thì dấu hiệu khử trùng sẽ bị loại bỏ.

Bạn cần phải khử trùng giá trị phong cách hoàn toàn và sau đó ràng buộc nó vào [style]="..."

nhưng một cách angulary hơn sẽ được sử dụng các ràng buộc kiễu góc hoặc chỉ thị

<div [style.top.px]="fromTop" [style.position]="'absolute'">Top:{{fromTop}}</div> 

<div [ngStyle]="{top: fromTop + 'px', position: 'absolute'}">Top:{{fromTop}}</div> 

Bằng cách này không làm vệ sinh là bắt buộc.