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>元素中。

使用Firestore进行简单的博客文章显示

1 个答案: