Angular 如何在没有html标记的情况下在浏览器上显示CKeditot文本？

我正在用CKEditor存储柱数据。将其存储在HTML标记旁边。
当我检索要在CKeditor中显示的内容时，它会以正确的格式正确呈现。但是，当我打算在HTML标记之外显示内容时，例如在主页上显示保存的内容，它使用HTML标记呈现内容
示例：
如何在正确的内容中显示它 检查图像以显示其渲染方式

用于保存Ckeditor内容的My typescript:

    import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
import {TycketService} from "../../../services/tycket.service";
import {Router} from "@angular/router";
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'kt-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.scss']
})
export class AddPostComponent implements OnInit {
  addPostForm: FormGroup;
  submitted = false;
  imageUrl = '';
  user: any;
  fileToUpload: File = null;
  published: boolean = false;
  public content;
  ERRORMESSAGE: any = '';
  SUCCESSMESSAGE: any = '';
  public Editor = ClassicEditor;
  editorData: any;
  constructor(private formBuilder: FormBuilder,
              private service: TycketService,
              private route: Router
              ) { }

  ngOnInit() {
    this.addPostForm = this.formBuilder.group({
      title: ['', Validators.required],
      category: ['', Validators.required],
      image: ['', Validators.required]
    });
    this.user = this.service.getUserData();
    this.user = this.user['email'];
  }
  public onChange( { editor } ) {
    this.editorData = editor.getData();
  }

  handleFileInput(file: FileList) {
    this.fileToUpload = file.item(0);
  }
  publishToggle(){
    this.published = !this.published;
    console.log(this.published);
  }
  onClickSubmit() {
    let formData = new FormData();
    formData.append('title', this.addPostForm.controls.title.value);
    formData.append('category', this.addPostForm.controls.category.value);
    formData.append('content', this.editorData);
    formData.append('image[]', this.fileToUpload, this.fileToUpload.name);
    formData.append('belongs_to', this.user);
    if(this.published === true) {
      formData.append('publish', 'true');
    }
    console.log(this.addPostForm.controls);
    this.submitted = true;
    if (this.addPostForm.invalid) {
      console.log('invaliddd');
      return;
    }
    this.service.addpost(formData).subscribe(res => {
      if (res['status'] !== '200') {
        this.ERRORMESSAGE = res['error'];
      } else {
        this.SUCCESSMESSAGE = res['message'];
        if (this.published) {
          this.route.navigateByUrl('/admin/posts');
        } else {
          this.route.navigateByUrl('/admin/unpublished');
        }
      }
    });
  }


}

我的HTML:

<ckeditor (change)="onChange($event)" [editor]="Editor"  data="<p>Post your content!</p>"></ckeditor>

用于检索已保存内容的My typescript:

  ngOnInit() {
    // this.user = this.service.getUserData();
    // this.user = this.user['email'];
    this.service.getpublishedPost('somtobuchi@gmail.com').subscribe(response => {
      this.userPosts = response['response'];
      this.postlen = this.userPosts.length;
      for (let i = 0; i < this.postlen; i++){
        this.images.push(this.service.imagebaseUrl(this.userPosts[i]['image']));
        this.posts[i] = {
          id: i,
          postid: this.userPosts[i]['id'],
          title: this.userPosts[i]['title'],
          category: this.userPosts[i]['category'],
          content: this.userPosts[i]['content'],
          created_at: this.userPosts[i]['created_at'],
          published_at: this.userPosts[i]['published_at'],
          image: this.images[i]
        };
      }
    });
    console.log(this.posts);
  }

ngOnInit（）{
//this.user=this.service.getUserData（）；
//this.user=this.user['email']；
this.service.getpublishedPost（'somtobuchi@gmail.com）。订阅（响应=>{
this.userPosts=response['response']；
this.postlen=this.userPosts.length；
for（设i=0；i

我的html

     <div class="post-content">
         {{posts[0].content}}
     </div>

{{posts[0].content}

您应该将保存的内容传递到要呈现HTML的div的innerHTML属性：

例如：

TS:

content='HTML测试'；

HTML:

<div [innerHTML]="content"> </div>

请向我们展示您的代码片段。帮助you@Oussail我就这么做了。谢谢兄弟！！这东西让我彻夜未眠！您是welcom bro，若要接受答案，请单击投票按钮下方的“复选标记”按钮。请更新您的问题，以便他们能够再次投票。所需的更新是：添加您尝试过的typescript代码和HTML代码

<div [innerHTML]="content"> </div>