SafeValue должен использовать [property]=binding, хотя я уже использую привязку свойств

У меня есть следующий HTML с привязкой свойства:

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

В моем компоненте я теперь добавляю некоторый контент с этой строкой кода

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

Но тем не менее я получаю эту ошибку «SafeValue должен использовать [свойство] = привязка».

Почему я получаю эту ошибку? Я уже использую привязку свойств! Я использую Ангуляр 5.

Редактировать: я пробовал использовать собственный канал внутри HTML, и он работал нормально, но мне нужно решение без каналов.

Редактировать2:

Вот моя функция, в которой я задаю HTML, может поможет. Полный рабочий пример невозможен, потому что мое приложение имеет дело с инструментами командной строки и потоками вывода (у меня есть Angular во фрейме Electron).

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