使用 Firestore 显示简单博客 post

Question

我正在使用 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>

Answer 1

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