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

【问题标题】：Angular 6 Firestore: render string embedded with HTML tags ... without displaying tagsAngular 6 Firestore：渲染嵌入HTML标签的字符串......不显示标签
【发布时间】：2018-10-08 18:59:57
【问题描述】：

Angular 6

Firestore

我有一个存储在 Firestore 中的博客 article 对象。我正在使用所见即所得的编辑器来编辑并将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>

【问题讨论】：

标签： html angular string typescript wysiwyg

【解决方案1】：

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

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

【讨论】：

谢谢！我一直在阅读这方面的内容并为此苦苦挣扎了大约 4 个小时。这非常有效。