Angular 6 Firestore：渲染嵌入了 HTML 标签的字符串...不显示标签

Question

Angular 6

Firestore

我有一个博客 article 对象存储在 Firestore 中。我正在使用所见即所得的编辑器来编辑 article.content 并将其保存到数据库中，这是一个字符串。当 article.content 被保存时，它看起来像这样：

"Some content. More content"

它也以这种方式呈现，未设置样式，显示所有 HTML 标签。

我如何呈现它以便内容按标签设置样式而不显示标签？

这是代码。

# article-detail-component.ts

export class ArticleDetailComponent {
  articlesCollection: AngularFirestoreCollection<Article>;
  article: any;
  id: any;

  constructor (private route: ActivatedRoute,
               private afs: AngularFirestore) {
      this.articlesCollection = this.afs.collection('articles');
      this.route.params.subscribe(params => {
          this.id = params['id'];
      });
      this.articlesCollection.doc(`${this.id}`).ref.get().then((doc) => {
        this.article = doc.data();
      });
  }
}

# article-detail-component.html

<app-ngx-editor [(ngModel)]="article.content"></app-ngx-editor>
<hr>
<div>
  {{article.content}}
</div>

Answer 1

将数据绑定到 innerHTML 属性以在视图中呈现动态 HTML:

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

Angular 6 Firestore：渲染嵌入了 HTML 标签的字符串...不显示标签

Angular 6 Firestore: render string embedded with HTML tags ... without displaying tags

html

string

wysiwyg

typescript

angular