带有innerHTML的Angular 7反应式表单答案

【问题标题】：Angular 7 Reactive form with innerHTML带有innerHTML的Angular 7反应式表单
【发布时间】：2019-11-05 13:16:34
【问题描述】：

我在 Angular 7 应用程序中使用 Primeng 编辑器。

<p-editor formControlName="description" [style]="{'height':'320px'}"></p-editor>

我正在使用 patchValue 设置控件的值，例如：

const desc = '<strong>Hello World</strong>';

this.form.patchValue({
  description: desc
});

另一个用例：

const desc = '<ul><li>Test 1</li><li>Test 2</li><li>Test 3</li></ul>'

在上述情况下，p 编辑器应将其呈现为：

测试 1
测试 2
测试 3

但我的反应式表单正在删除所有 HTML 格式并仅将“Hello World”分配给控件。我需要保留来自服务器的 HTML 格式。

任何帮助将不胜感激。

【问题讨论】：

您可以将其设置为样式本身的字体粗细。你试过吗？
它不特定于字体粗细。如果我的数据包含一个列表，那么它应该在 p-editor 组件中呈现为列表。

标签： angular primeng angular-reactive-forms

【解决方案1】：

找不到合适的解决方案，但您可以试试这个技巧：

<p-editor #myEditor formControlName="description" [style]="{'height':'320px'}"></p-editor>

在ts文件中

import { Editor } from 'primeng/primeng';

@ViewChild('myEditor') myEditor: Editor


const desc = '<strong>Hello World</strong>';

this.form.patchValue({
  description: desc
});

// this will replace innerHTML with service data
this.myEditor.e1.nativeElement.querySelector('ql-editor').innerHTML = desc;

【讨论】：