如何將 ngx-quill 編輯器內容從我的數據庫渲染到視圖組件？

Question

我正在開發一個使用 ngx-quill 作為文本編輯器的 angular 博客應用程序。 將記錄添加到我的數據庫中沒有任何問題。 當我嘗試呈現內容時出現問題，它沒有顯示數據。

這是我要在其中顯示內容的詳細信息發布組件 HTML：

 <article class="post" *ngIf="post$ | async as post; else loading"> <div class="post-thumbnail" style="background-image: url(&quot;https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80&quot;);" > <h1 class="post-title">{{ post.titlePost }}</h1> <div class="post-meta">February 20, 2020</div> </div> <div class="blog-post-content"> {{ post.contentPost }} </div> </article> <ng-template #loading> <div class="container-spinner"> <mat-spinner></mat-spinner> </div> </ng-template>

Answer 1

對於ngx-quill，您必須使用它們自己的指令：

<quill-view [content]="content" format="text" theme="snow"></quill-view>

或innerHTML 。 更多信息在這里

<div class="ql-container ql-snow" style="border-width: 0;">
  <div class="ql-editor" [innerHTML]="byPassedHTMLString">
  </div>
</div>

我建議使用他們自己的指令。

干杯