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

如何创建一个显示所需空格数的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.

Answer 2

您可以为非中断空格返回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>

Angular 5 - 每次迭代缩进

2 个答案: