Angular CKEditor 无法使用所需值设置数据属性

Question

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

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

谢谢。

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

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

我通过在 ckeditor angular 组件上添加 [formControlName] 指令解决了这个障碍。然后你从 ReactiveFormsModule.

的普通表单元素中获取 set/get 值

注意：在这种情况下，不再需要 data 和 change 属性

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

Angular CKEditor 无法使用所需值设置数据属性

Angular CKEditor Cannot set data property with required values

angular

ckeditor5

Angular CKEditor 无法使用所需值设置数据 属性

Angular CKEditor Cannot set data property with required values

angular

ckeditor5

Angular CKEditor 无法使用所需值设置数据属性