如何在Angular 4应用中编程实现表格指定行的间距？

嘿，我来帮你搞定这个表格行间距的需求！你已经用[ngClass]给特定行加样式了，咱们可以基于这个思路，用两种简单的方式实现你要的效果：

方案一：给目标行添加底部内边距（推荐） #

这个方案不需要额外添加行，直接给目标行的单元格加底部内边距，视觉上就等同于行后的间距，简洁高效。

步骤1：在组件CSS中添加样式 #

/* 给目标行的所有单元格加底部内边距 */
.spaced-after-row td {
  padding-bottom: 20px !important; /* 可以根据需求调整数值 */
}

步骤2：修改模板中的行样式绑定 #

先在你的组件.ts文件里定义一个常量（方便后续维护，不用反复改模板）：

// 定义需要添加间距的行标题
public targetSpacedRow = 'Net Premiums Written';

然后修改表格的<tr>标签，扩展[ngClass]的条件：

<tr *ngFor="let row of fsIncomeStatementTable | slice:1" 
    [ngClass]="{
        'net-cost': row[0] === incomeStatementStyles[0] || row[0] === incomeStatementStyles[1] || row[0] === incomeStatementStyles[2] || row[0] === incomeStatementStyles[3],
        'spaced-after-row': row[0] === targetSpacedRow
    }">
  <td>{{row[0]}}</td>
  <td *ngFor="let cell of row | slice:1">{{cell | shortAndBlankNumberFormat: 2}}</td>
</tr>

方案二：插入空行作为间距 #

如果需要更大的间距，或者希望间距是独立的空白区域，可以在目标行后插入一个空行：

步骤1：修改模板结构 #

用<ng-container>包裹循环内容，这样可以灵活在每行后判断是否插入空行：

<tbody>
  <ng-container *ngFor="let row of fsIncomeStatementTable | slice:1">
    <!-- 原有的数据行 -->
    <tr [ngClass]="{'net-cost': row[0] === incomeStatementStyles[0] || row[0] === incomeStatementStyles[1] || row[0] === incomeStatementStyles[2] || row[0] === incomeStatementStyles[3]}">
      <td>{{row[0]}}</td>
      <td *ngFor="let cell of row | slice:1">{{cell | shortAndBlankNumberFormat: 2}}</td>
    </tr>
    <!-- 仅在目标行后插入空行 -->
    <tr *ngIf="row[0] === targetSpacedRow" class="spacing-row">
      <td colspan="{{fsIncomeStatementTable[0].length}}" style="border: none; height: 20px;"></td>
    </tr>
  </ng-container>
</tbody>

步骤2：添加空行样式（可选） #

如果你的表格有默认边框，给空行加样式去掉边框，避免影响视觉效果：

.spacing-row td {
  border: none !important;
  padding: 0 !important;
}

注意事项 #

• 确保row[0]的文本和你要匹配的行标题完全一致（包括大小写、空格），用组件常量的方式可以避免拼写错误，也方便后续修改。
• 两种方案都可以适配你现有的三个表格（Income Statement、Cash Flow、Balance Sheet），只需要把targetSpacedRow换成对应表格需要的行标题即可。

内容的提问来源于stack exchange，提问作者Tom