尽管我已经在使用属性绑定，但SafeValue必须使用[property] = binding [英] SafeValue must use [property]=binding although I'm already using property binding

问题描述

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

I have following HTML with a property binding:

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

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

In my component I add now some content with this line of code

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

但是，尽管如此，我仍然收到错误消息:"SafeValue必须使用[property] = binding".

But nevertheless I get this error "SafeValue must use [property]=binding".

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

Why I get this error? I'm already using property binding! I'm using Angular 5.

我尝试在HTML内使用自定义管道，但效果很好，但是我想要一个没有管道的解决方案.

I tried out using a custom pipe inside the HTML and it worked fine, but I want a solution without pipes.

Edit2:

这是我设置HTML的函数，可能有帮助.不可能有一个完整的工作示例，因为我的应用程序处理命令行工具和输出流(我在Electron框架中有Angular)

Here my function, where I set the HTML, maybe it helps. A complete working example is not possible, because my app deals with command line tools and output streams (I have Angular in an Electron frame)

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();
});

推荐答案

我现在在@JB Nizet的帮助下解决了该问题.我现在使用两个变量.第一个变量是包含我生成的原始HTML的帮助程序变量，另一个变量包含已绑定到HTML的经过净化的HTML，因为您无法连接SafeHtml(绕过的结果)和字符串.

I now solved the problem with help of @JB Nizet in the comments. I'm now using two variables. The first is a helper variable containing the raw HTML I generate, the other variable contains the sanitised HTML which is bind to HTML, because you cannot concat SafeHtml (the result of bypassing) and a string.

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

这篇关于尽管我已经在使用属性绑定，但SafeValue必须使用[property] = binding的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！