Angular 5 - 每次迭代缩进

Question

我在HTML表中显示值，例如

<tbody>
    <tr *ngFor="let employee of employeeList; let i = index">
      <td> {{i}} {{ employee.name }}</td>
      <td>{{ employee.address }}</td>
    </tr>
  </tbody>

我需要的是，在employee.name单元格中，第一个员工应该有0个空间，第二个员工应该有一个空间，第三个员工应该有2个空格，依此类推。

所以，结果看起来应该是这样的

  John         Chicago
   Thomas      London
    Anna       New York

使用i = index，我可以获得每一行的索引。但是，我无法弄清楚如何将每个索引转换为空格。

Answer 1

您可以为非中断空间返回unicode文字：

spaces(num) {
 let spaces = '';
  for (let i = 0; i < num; i++) {
   spaces += '\u00A0';
 }
 return spaces;
}

并在你的HTML中调用它：

<tbody>
  <tr *ngFor="let employee of employeeList; let i = index">
    <td>{{spaces(i)}}{{employee.name}}</td>
    <td>{{employee.address}}</td>
  </tr>
</tbody>

Answer 2

如何创建一个spaces组件，显示所需的空格数并在循环中使用它：

SpacesComponent：

<ng-container *ngFor="let i of numbers">
    &nbsp;
</ng-container>

用法：

<ng-container *ngFor="let name of ['A', 'B', 'C', 'D', 'E', 'F']; let i = index">
  <spaces [count]="i"></spaces> {{ name }}<br/>
<ng-container> 

Here is a running example.