如何在 ngFor 数组结果之间添加空格答案

【问题标题】：How to add a space between ngFor array results如何在 ngFor 数组结果之间添加空格
【发布时间】：2018-10-16 11:50:35
【问题描述】：

找不到有效的答案。

简单的 *ngFor 返回一个数组：

<ul class="address>
  <li *ngFor="let address of census">
    {{address.occupants}}
  </li>
</ul>

看起来很简单，但结果看起来像：

John Smith,John Doe,John Brown

请注意结果之间没有间距。

这是因为“occupants”是我数据中的一个数组：

  {
    id: 1,
    occupants: ['John Smith', 'John Doe', 'John Brown'],
    address: '5 Johns Street',
  },

如何使用 *ngFor 输出 Johns 列表，每个条目之间有一个空格？

【问题讨论】：

【解决方案1】：

尝试使用来自angular-pipes 的join 管道像这样：

<ul class="address>
 <li *ngFor="let address of census">
   {{address.occupants | join: ' '}}
 </li>
</ul>

【讨论】：

【解决方案2】：

如果你真的需要介于两者之间：

  <ng-container *ngFor="let address of census">
   <li >
     {{address.occupants}}
   </li>{{" "}}
  </ng-container>

【讨论】：