Как добавить пробел между результатами массива ngFor

Question

Не могу найти ответ на этот вопрос, который работает.

Simple * ngFor, который возвращает массив:

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

Кажется, все просто, НО результаты выглядят так:

John Smith,John Doe,John Brown  

Обратите внимание на отсутствие пробелов между результатами.

Это потому, что "оккупанты" - это массив в моих данных:

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

Как мне использовать * ngFor для вывода списка Джонсов с пробелом между каждой записью?

Answer 1

Попробуйте использовать соединение трубы из угловых труб как это:

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