ngStyle内部的函数调用已清理

问题描述

我对Angular 8的样式清理有疑问。我已经使用了ngStyle多次，但是这次我无法设置td元素的边框。

我正在尝试根据字段设置边框样式。如果该字段对我来说具有相关的内容，那么我会忽略它，否则我不会。我不知道该字段的可能值的数目，也不知道确切的值：它是动态的，我只知道我感兴趣的值。

我要从.ts文件中的函数返回边框样式。以下是代码段：

<ng-container matColumnDef="{{cam}}">
   <th mat-header-cell *matHeaderCellDef class="header"> {{cam}} </th>
   <td mat-cell *matCellDef="let piano" class="cellaMagazzino" [ngStyle]=" {'border':shouldHighlight(piano[cam])}">
      <div>
           <!--content-->
      </div>
   </td>
</ng-container>

我的打字稿功能看起来像这样：

shouldHighlight(element){
if (this.listaCommittenti == undefined && this.listaNumOrdine == undefined) {
  let found = this.releventContentList.find(item => item.property == element.property)
  let result = found != undefined ? '3px solid ' + this.myVariable["color"] : ""
  return result
}

我其他时候使用了ngStyle调用函数，但是在这种情况下，我得到了错误：

警告：清理不安全的样式值3px固体rgb（241、196、15）（请参见http://g.co/ng/security#xss）。

是否需要某种配置？有解决方法吗？

解决方法

这对您有用吗？

打字稿：

getHighlightColor():string {
   return  "rgba(255,255,1)"; 
}
shouldHighlight(): boolean {
    return true;
}

HTML：

<td mat-cell [style.border-color]="getHighlightColor(piano[cam])" [ngClass]="{ 'highlighted': shouldHighlight(piano[cam])}"

CSS：

.highlighted{
   border-width:3px;
   border-style:solid;
   border-color:transparent;
}

通常，我强烈建议不要在模板中使用函数调用，因为它是真正的性能杀手。最好计算所需的类并将它们添加到您的数据中。

Federico的方法不错，但是您也可以使用原始方法并通过"browser": { "original-fs": false }参见Trusting safe values

绕过样式安全性。

angular8 ng-style sanitize sanitize styles