在 angular 组件的 html 模板中保留尾随空格？

Question

I want to display a comma separated list of names like test1, test2, test3 . I am using something like below:

<div style="display: inline-block;" *ngFor="let object of objectList; let i = index;">
        {{object.name}}{{((i+1) === objectList.length) ? '' : ', '}}
 </div>

All the trailing whitespaces are removed and result is test1,test2,test3 . I was using &nbsp but I read at some places that it was not recommended to use. How should I preserve these whitespaces?

edit: code didn't have that style tag earlier (which is in a separate.css file in the actual code but placing it inline for the sake of the question)

Answer 1

I'd suggest two changes.

1. At the moment, each element of the array is rendered in it's own <div> tag. So it'd look like following

<div>test1, </div>
<div>test2, </div>
<div>test3, </div>
<div>test4, </div>
<div>test5</div>

Whereas you might need to enclose all the elements in a single <div> container like

<div>test1, test2, test3, test4, test5</div>

For that you could iterate the array in a <ng-container> tag. It'll be commented out in the final DOM and would render additional elements.

2. You could use the last local variable of the *ngFor directive instead of checking using the index and the array's length.

Try the following

<div>
  <ng-container *ngFor="let object of objectList; let last = last;">
    {{ object.name }}{{ last ? '' : ', ' }}
  </ng-container>
</div>