如何在 ngFor 数组结果之间添加 space

Question

找不到有效的答案。

简单 *ngFor returns 一个数组：

<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 输出每个条目之间带有 space 的 Johns 列表？

Answer 1

尝试使用join pipe from angular-pipes 像这样：

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

Answer 2

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

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

How to add a space between ngFor array results