[英]Angular 6 Firestore: render string embedded with HTML tags ... without displaying tags
Angular 6角 6
Firestore火店
I have a blog article
object stored in Firestore.我有一个存储在 Firestore 中的博客
article
对象。 I'm using a wysiwyg editor to edit and save article.content
, which is a string, to the database.我正在使用所见即所得编辑器来编辑和保存
article.content
,它是一个字符串,到数据库中。 When article.content
is saved, it looks like this:当
article.content
被保存时,它看起来像这样:
"<p>Some content.<p><br><p>More content</p>"
It renders that way too, un-styled, showing all of the HTML tags.它也以这种方式呈现,没有样式,显示所有 HTML 标签。
How do I render this so that the content is styled by the tags and the tags are not displayed?我如何呈现它以便内容由标签设置样式并且标签不显示?
Here is the code.这是代码。
# 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>
将数据绑定到innerHTML
属性以在视图中呈现动态 HTML:
<div [innerHTML]="article.content"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.