ngStyle 中的函数调用得到清理

Function call inside ngStyle gets sanitized

我在使用 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 solid rgb(241, 196, 15)(参见 http://g.co/ng/security#xss)。

是否需要进行某种配置?有解决方法吗?

这对你有用吗?

打字稿:

getHighlightColor():string {
   return  "rgba(255,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 的方法是一个很好的解决方法,但是您也可以使用您的原始方法并通过 bypassSecurityTrustStyle(yourStyleString) 绕过样式安全性,请参阅 Trusting safe values