如何在Angular的*ngFor数组结果间添加空格？

嘿，这个场景我太熟悉了！你遇到的问题是因为occupants本身就是一个数组，直接插值输出会默认调用数组的toString()方法，而这个方法是用逗号直接拼接元素的，所以才会挤在一起。给你两种实用的解决办法：

方法一：嵌套*ngFor（适合需要单独控制每个元素的场景） #

如果之后你需要给每个人员名字加样式或者做其他处理，嵌套遍历是更灵活的选择：

<ul class="address">
  <li *ngFor="let address of census">
    <!-- 遍历每个地址下的occupants数组，同时判断是否为最后一个元素 -->
    <span *ngFor="let person of address.occupants; let isLast = last">
      {{ person }}
      <!-- 不是最后一个元素就加空格 -->
      <span *ngIf="!isLast"> </span>
    </span>
  </li>
</ul>

这里用Angular的last局部变量来判断当前元素是不是数组的最后一项，避免在末尾多出来一个多余的空格。

方法二：使用数组的join()方法（最简洁的方案） #

如果不需要对每个人员名字做额外处理，直接用数组原生的join()方法就可以一步到位，指定你想要的分隔符（空格、逗号加空格都可以）：

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

要是你想要的是「John Smith, John Doe, John Brown」这种逗号加空格的格式，只需要把join(' ')改成join(', ')就行，非常灵活！

内容的提问来源于stack exchange，提问作者Rin and Len