Angular CKEditor 无法设置具有所需值的数据属性

Question

我正在构建一个使用 CKEditor 的角度应用程序。 我正在尝试根据从数据库中提取的内容将数据加载到编辑器中，以便用户可以对其进行编辑。这个问题是当我尝试将数据设置为从数据库中提取的字符串时，编辑器始终为空白。但是，当我复制并粘贴字符串（完全相同的字符串）时，它工作得很好。我似乎找不到这个问题的根源。非常感谢任何帮助。

您可以在底部的图像中看到它应该如何工作，并且即使使用相同的文本直接设置字符串时它也可以工作，但是当我尝试使用从我的数据库中获取的数据时，什么也没有。我认为在检查控制台时字符串是正确的。

谢谢。

相关代码 //根据输入对象属性设置值

ngOnChanges() :void{
    console.log(this.currentProduct);
    this.productForm.setValue({
      categoryName : this.currentProduct.category.categoryName,
      name : this.currentProduct.name,
      price : this.currentProduct.price,
      inStock : this.currentProduct.inStock,
      stockQty : this.currentProduct.stockQty
    });
    this.productDescription = this.currentProduct.desc.valueOf();    
    console.log(this.productForm.value, this.productDescription);
  }

html

<div class="form-control d-flex" style="flex-direction: column">
            <label for="productDescription" class="">Product Description</label>
            <div class="input-group">
              <ckeditor
                [editor]="Editor"
                [data]="productDescription"
                (change)="ckEditOnChange($event)"
                style="width: 100%"
              ></ckeditor>
            </div>
          </div>

什么时候起作用的例子

  ngOnChanges() :void{
    console.log(this.currentProduct);
    this.productForm.setValue({
      categoryName : this.currentProduct.category.categoryName,
      name : this.currentProduct.name,
      price : this.currentProduct.price,
      inStock : this.currentProduct.inStock,
      stockQty : this.currentProduct.stockQty
    });
    this.productDescription = "<p>this is my description</p>";    
    console.log(this.productForm.value, this.productDescription);
  }

Answer 1

我通过在

[formControlName]

角分量上添加

ckeditor

指令解决了这个障碍。然后你可以像

ReactiveFormsModule

.

的普通表单元素一样设置/获取值

注意： 在这种情况下，

data

和

change

属性不再需要

 <ckeditor [editor]="Editor" formControlName="FORM_CONTROL_NAME"></ckeditor>

Answer 2

角度 HTML 文件

然后在组件上

@ViewChild("myEditor", { static: false }) myEditor: any;

你可以简单的通过

this.myEditor.data = DATA_YOU_WANT_TO_PASS