angular - 绕过SecurityTrustHtml Angular 6后文本框不起作用

Question

我正在 Angular 6 中创建一个管道，如果通过某些条件，它会返回一个文本框。因为输入不安全。我正在使用 bypassSecurityTrustHtml 来解决这个问题。现在我有另一个问题..它显示了文本框，但我无法写入或更改它。看起来没有禁用，但我无法选择它并更改任何内容。有谁知道发生了什么？谢谢！！

import { Pipe, PipeTransform } from '@angular/core';
import { validateConfig } from '@angular/router/src/config';
import { TYPED_NULL_EXPR } from '@angular/compiler/src/output/output_ast';
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'appConvertElement',
  pure: false
})

export class ConvertElementPipe implements PipeTransform {

  constructor( private _sanitizer: DomSanitizer) { }

  transform(text: string, field: string) {
    return this.ConvertValue(text, field);
  }

  private ConvertValue(text: string, field: string) {
    let transformText = text;


      if (condition)
        return this.createTextBox(text,field);
    }
    return transformText;
  }

  createTextBox(text,id) {
    let textBox = document.createElement('input');
    textBox.type = 'text';
    textBox.setAttribute("value", text);
    textBox.id = id;
    textBox.name = id;
    textBox.value = text;
    textBox.title = text;
   // return textBox.outerHTML;
    return this.safeHTML(textBox.outerHTML);
  }

  safeHTML(v: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }

}

html是：

 <div [innerHTML]="value | appConvertElement: field"></div>

标签： angulartextboxpipe