Question

我使用属性绑定跟随HTML：

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

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

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

但是我得到了这个错误“SafeValue必须使用[property] = binding”。

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

编辑：我尝试在HTML中使用自定义管道并且工作正常，但我想要一个没有管道的解决方案。

EDIT2：

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

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

Answer 1

我现在在评论中借助@JB Nizet解决了这个问题。我现在使用两个变量。第一个是包含我生成的原始HTML的辅助变量，另一个变量包含与HTML绑定的已清理HTML，因为您无法连接SafeHtml（绕过的结果）和字符串。

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

尽管我已经在使用属性绑定，但SafeValue必须使用[property] = binding

1 个答案: