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

Question

У меня есть следующая строка html, которую я могу получить из службы http:

When uranium was {{1}} to be radioactive, Marie Curie found that the element called {{2}} had the same property.

Я хочу заменить {{1}} и {{2}} на управление реактивной формой в угловом 5 динамически. как?

Answer 1

Хотелось бы что-нибудь подобное для вас?

HTML:

<form [formGroup]="testForm">
    <div id="myDiv"></div>
</form>

Машинопись:

export class AppComponent {
  testForm = new FormGroup({
    answer1: new FormControl(""),
    answer2: new FormControl("")
  });
  public testString: string =
    "<ul><li>When uranium was {{1}} to be radioactive</li><li> Marie Curie found that the element called {{2}} had the same property.</li></ul>";

  ngOnInit() {
    this.testString = this.testString.replace(
      "{{1}}",
      '<input type="text" formControlName="answer1" />'
    );
    this.testString = this.testString.replace(
      "{{2}}",
      '<input type="text" formControlName="answer2" />'
    );
    document.getElementById("myDiv").innerHTML = this.testString;
  }
}

Answer 2

Компонент Angular Dynamic Compile, который превращает строку в скомпилированный компонент

введите описание ссылки здесь

Answer 3

Невозможно динамически генерировать входные данные формы, так как они должны обрабатываться Angular.

Но вы можете подготовить эти входные данные в формате html, но скрыть их. Затем установите текст в соответствующих местах и ​​сделайте видимым.