为什么Tinymce编辑器不显示从数据库加载的值

Question

我有一个使用Reactive表单创建记录的Angular 7应用程序。我已经按照这些说明集成了Tinymce编辑器，并将其用于其中一个字段。我可以使用该表单创建新记录，并将tinymce编辑器中的内容正确保存到数据库中。但是，当我从数据库加载记录时，除编辑器的值外，所有字段的记录都以表格的形式填充。编辑器已加载，但没有内容显示。

这是html：

<h1>
  Article editing
</h1>
<p>{{error}}</p>
<form [formGroup]="articleForm" >
<div class="form-group">
  <label for="articleTitle">Article Title:</label>
  <input class="form-control" type="text" formControlName="articleTitle">
</div>

<div class="form-group">
<label for="longFormText">
  Long Form Text:
</label>
<editor style="min-height: 500px;" 
  apiKey="mykeyvalue" 
  [init]="{plugins: 'link', toolbar: 'undo redo | bold italic | bullist numlist outdent indent'}" 
  id="longFormTextEditor"
  formControlName="longFormText"
  >
</editor>
</div>
<button type="button" class="btn btn-default" 
[disabled]="!articleForm.valid" value="Submit" (click)="onSubmit()" 
>Submit</button>

</form>

这是ts文件：

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ArticleService } from 'src/app/services/article.service';
import { Article } from 'src/app/models/Article';
import { AppStateService } from 'src/app/services/app-state.service';
import { ActivatedRoute } from "@angular/router";

declare let tinymce:any;

@Component({
  selector: 'app-article-edit',
  templateUrl: './article-edit.component.html',
  styleUrls: ['./article-edit.component.css']
})

export class ArticleEditComponent implements OnInit, AfterViewInit {
  error:any;
  ok:Article;

  articleForm:FormGroup ;  
  article:Article;
  articleId:number;

  editor;

  constructor(private articleService:ArticleService, private fb:FormBuilder, 
private route:ActivatedRoute) { 

    this.articleId = this.route.snapshot.params.id;

  }

  ngOnInit() {
    this.articleForm = this.fb.group({
      articleTitle: [],
      rank: [1],
      articleSummary: [],
      longFormText: [],
      readyToPublish: [false],
      tweetTitle: [],
      tweetText: [],
      tweetId: [],
      linkedInTitle: [],
      linkedInText: [],
      linkedInId: [],
      dateCreated: [new Date().toISOString().split('T')[0]],
      dateLastSaved: [new Date().toISOString().split('T')[0]],
      imageUrl1: []
    });  
  }

  ngAfterViewInit() {

    if (this.articleId != undefined) {
      this.articleService.getSingle(this.articleId).subscribe(
        x => {
          this.article = x;
          this.populateForm();
        }
      )
    }    
  }

  populateForm() {
    this.articleForm.patchValue({
      articleTitle: [this.article.articleTitle],
        longFormText: [this.article.longFormText]
      });  


  }


  onSubmit() {
    if (this.articleForm != undefined) {
      let a:Article = this.articleForm.value;

      this.articleService.add(a).subscribe(x => this.ok = x, error => this.error = error );

    }
  }

}