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

Question

无法找到有效的答案。

简单* ngFor返回一个数组：

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

似乎很容易，但结果如下：

John Smith,John Doe,John Brown  

注意结果之间缺少间距。

这是因为＆＃34;占有者＆＃34;是我数据中的一个数组：

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

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

Answer 1

尝试使用join中的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>