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

问题描述

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

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

谢谢你。

RELEVANT CODE //根据输入对象属性设置值

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);
  }

标签： angularckeditor5

我通过在角度组件上添加[formControlName]指令解决了这个障碍。ckeditor然后你从普通的表单元素中设置/获取值ReactiveFormsModule。

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

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

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

问题描述

解决方案

推荐阅读