Question

角度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>

Answer 1

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

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

Angular 6 Firestore：呈现嵌入HTML标签的字符串...不显示标签

1 个答案: