使用 Firestore 显示简单的博客文章答案

【问题标题】：Simple Blog post display with Firestore使用 Firestore 显示简单的博客文章
【发布时间】：2019-01-01 03:42:07
【问题描述】：

我正在使用 Angular 5 和 Firestore 数据库创建一个简单的博客。我能够保存到数据库并检索数据以供显示。问题是当我将文本区域值保存到数据库时。它不保留我想要的换行符和间距，因此在检索时，它只是一个单行字符串。在解决我不熟悉的这些类型的问题之前，我会保持超级简单。

有什么简单有效的方法可以解决这个问题吗？

这就是我当前显示和保存数据的方式。

ngOnInit() {
  this.createForm();
  this.postCollectionRef = this.afs.collection('posts');
  this.postCollectionList = this.postCollectionRef.valueChanges();
}

addPost(val) {
  this.postCollectionRef.add({ title: val.title, body: val.body });
}

<div>
  <ul>
    <li *ngFor="let post of postCollectionList | async">
      {{ post.title }}
      <br> {{ post.body }}
    </li>
  </ul>
</div>

【问题讨论】：

标签： javascript html angular google-cloud-firestore blogs

【解决方案1】：

在我看来，这看起来像是一个 HTML/CSS 问题——<li> 与大多数 HTML 元素一样，默认情况下会折叠空白序列。尝试将{{ post.body }} 包裹在<pre> 标记内，或将style="white-space: pre;" 添加到<li> 元素中。

【讨论】：