javascript - 使用 Firestore 显示简单的博客文章

标签 javascript html angular google-cloud-firestore blogs

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

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

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

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>

最佳答案

对我来说,这看起来像是一个 HTML/CSS 问题 -- <li>和大多数 HTML 元素一样,默认折叠空白序列。尝试包装 {{ post.body }}<pre> 里面标记,或添加 style="white-space: pre;"<li>元素。

关于javascript - 使用 Firestore 显示简单的博客文章,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51499945/

相关文章:

javascript - 在 iCheck 的复选框选中和未选中状态上显示和隐藏另一个复选框

javascript - 在搜索框选项卡之间单击时,如何使它们保持事件状态?

css - 无法在 HTML、CSS 的文章标签内定位不同的列表项

angular - 如何从 Angular Material 复选框中获取值

javascript - VisualSearch.js : Is there a vanilla Javascript alternative to VisualSearch. js(多面搜索)?

javascript - 如何以唯一的顺序对数组进行排序

javascript - 隐藏/显示位置 :fixed container under non-fixed containers

javascript - 延迟为1调用setTimeout的目的是什么?

javascript - JQuery 下一个类

c# - 如何在 .Net Core 中创建自定义异常和错误处理程序?