SafeValue 必须使用 [property]=binding 虽然我已经在使用属性绑定答案

【问题标题】：SafeValue must use [property]=binding although I'm already using property bindingSafeValue 必须使用 [property]=binding 虽然我已经在使用属性绑定
【发布时间】：2018-07-06 13:11:30
【问题描述】：

我有以下带有属性绑定的 HTML：

<div [innerHtml]="logOutput"></div>

在我的组件中，我现在用这行代码添加一些内容

this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + otpStr );

但我仍然收到此错误“SafeValue must use [property]=binding”。

为什么会出现此错误？我已经在使用属性绑定了！我正在使用 Angular 5。

编辑：我尝试在 HTML 中使用自定义管道，效果很好，但我想要一个没有管道的解决方案。

编辑2：

这是我设置 HTML 的函数，也许它有帮助。一个完整的工作示例是不可能的，因为我的应用程序处理命令行工具和输出流（我在电子框架中有 Angular）

this.logStream.on('data', (chunk) => {
  let otpStr = chunk.toString();
  if (otpStr == '') {
    return;
  }

  otpStr = this.StylePipe(otpStr); // Convert ANSI Styles to HTML with CSS
  otpStr = otpStr.replace(/\r?\n/g, '<br />');
  otpStr = otpStr.replace(/<br \/><br \/>/g, '<br />');
  otpStr = otpStr.replace(/^<br \/>/, '');
  otpStr = otpStr.replace(/<br \/>$/, '');
  this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + otpStr + '<br />' );
  this.ref.detectChanges();
});

this.logStream.on('end', () => {
  this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + '<br />' );
  this.ref.detectChanges();
});

【问题讨论】：

在这里工作正常：stackblitz.com/edit/…。发布一个完整的最小示例来重现问题。
我添加了更多代码。一个工作示例会非常困难，因为它不仅仅是一个网络应用程序
一点也不难。看，我刚刚做了：stackblitz.com/edit/angular-iottff?file=app%2Fapp.component.ts。您正在连接 this.logOutput ，它不是字符串，而是 SafeHtml 的一个实例，带有“
”。不要那样做。通过将字符串连接在一起生成一个 HTML 字符串，然后对该字符串调用 bypassSecurityTrustHtml。
谢谢，“不要连接”的东西有效；）

标签： angular sanitization property-binding

【解决方案1】：

我现在在 cmets 的 @JB Nizet 的帮助下解决了这个问题。我现在使用两个变量。第一个是包含我生成的原始 HTML 的辅助变量，另一个变量包含绑定到 HTML 的净化 HTML，因为您无法连接 SafeHtml（绕过的结果）和字符串。

this.logOutputHtml += otpStr;
this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutputHtml );

【讨论】：