Angular 6项目中合并MySQL数据表展示格式修复问题

我来帮你搞定这个Debit和Credit表头挤偏的问题！核心原因是你在父表格的一个单元格里嵌入了完整的子表格，这打破了父表格的列结构一致性，导致浏览器无法正确计算列宽，自然就错位了。下面给你两种修复方案，你可以根据需求选：

方案1：去掉嵌套表格，用单元格合并（rowspan）实现多行条目展示 #

直接在父组件里处理交易条目，通过rowspan把交易的公共信息（日期、类型、创建人、描述、状态）合并成多行，每个条目单独占一行的Account/Debit/Credit列。

修改后的jr.component.html：

<table class="table table-hover e-table">
 <thead>
 <tr>
 <th>Date</th>
 <th>Type</th>
 <th>Created By</th>
 <th>Account</th>
 <th>Debit</th>
 <th>Credit</th>
 <th>Description</th>
 <th>Status</th>
 </tr>
 </thead>
 <tbody>
 <ng-container *ngFor="let transaction of viewTransactions">
  <!-- 交易主行：合并公共信息列 -->
  <tr>
    <td rowspan="{{transaction.entries.length}}">{{transaction.createDate | date: 'M/d/yyyy'}}</td>
    <td rowspan="{{transaction.entries.length}}">{{transactionType[transaction.type]}}</td>
    <td rowspan="{{transaction.entries.length}}">{{transaction.createdBy.fullName}}</td>
    <!-- 第一个条目的账户/借方/贷方 -->
    <td>{{transaction.entries[0].account.name}}</td>
    <td>{{transaction.entries[0].amount > 0 ? (transaction.entries[0].amount | currency) : ''}}</td>
    <td>{{transaction.entries[0].amount < 0 ? (-transaction.entries[0].amount | currency) : ''}}</td>
    <td rowspan="{{transaction.entries.length}}">{{transaction.description}}</td>
    <td rowspan="{{transaction.entries.length}}" class="text-center align-middle">
      <span class="d-block" *ngIf="!canUserPost() || transaction.status != transactionStatusType.Pending" 
            [ngClass]="{'text-dark': transaction.status == transactionStatusType.Pending, 
                        'text-success': transaction.status == transactionStatusType.Approved, 
                        'text-danger': transaction.status == transactionStatusType.Rejected}">
        {{transactionStatusType[transaction.status]}}
      </span>
      <div *ngIf="canUserPost() && transaction.status == transactionStatusType.Pending">
        <button class="btn btn-dark w-100 mb-3" data-toggle="modal" data-target="#modal-resolve-journal-entry" 
                [attr.data-approve]="true" [attr.data-transaction]="transaction.id">Approve</button>
        <button class="btn btn-dark w-100" data-toggle="modal" data-target="#modal-resolve-journal-entry" 
                [attr.data-approve]="false" [attr.data-transaction]="transaction.id">Reject</button>
      </div>
    </td>
  </tr>
  <!-- 剩余条目：仅填充账户/借方/贷方列 -->
  <tr *ngFor="let entry of transaction.entries.slice(1)">
    <td>{{entry.account.name}}</td>
    <td>{{entry.amount > 0 ? (entry.amount | currency) : ''}}</td>
    <td>{{entry.amount < 0 ? (-entry.amount | currency) : ''}}</td>
  </tr>
 </ng-container>
 </tbody>
</table>

方案2：保留子组件，但让子组件输出表格行而非完整表格 #

如果你想继续使用app-journal-entries-list子组件，需要修改子组件，让它直接生成<tr>标签，而不是包含在<table>里，这样就能和父表格的列结构对齐。

第一步：修改子组件jre.component.html #

去掉外层的<table>标签，直接输出条目行：

<tr *ngFor="let entry of entries">
 <td>{{entry.account.name}}</td>
 <td>{{entry.amount > 0 ? (entry.amount | currency) : ''}}</td>
 <td>{{entry.amount < 0 ? (-entry.amount | currency) : ''}}</td>
</tr>

第二步：修改父组件jr.component.html #

用rowspan合并交易公共信息列，然后嵌入子组件生成条目行：

<table class="table table-hover e-table">
 <thead>
 <tr>
 <th>Date</th>
 <th>Type</th>
 <th>Created By</th>
 <th>Account</th>
 <th>Debit</th>
 <th>Credit</th>
 <th>Description</th>
 <th>Status</th>
 </tr>
 </thead>
 <tbody>
 <ng-container *ngFor="let transaction of viewTransactions">
  <!-- 交易主行：合并公共信息列 -->
  <tr>
    <td rowspan="{{transaction.entries.length}}">{{transaction.createDate | date: 'M/d/yyyy'}}</td>
    <td rowspan="{{transaction.entries.length}}">{{transactionType[transaction.type]}}</td>
    <td rowspan="{{transaction.entries.length}}">{{transaction.createdBy.fullName}}</td>
    <td rowspan="{{transaction.entries.length}}">{{transaction.description}}</td>
    <td rowspan="{{transaction.entries.length}}" class="text-center align-middle">
      <span class="d-block" *ngIf="!canUserPost() || transaction.status != transactionStatusType.Pending" 
            [ngClass]="{'text-dark': transaction.status == transactionStatusType.Pending, 
                        'text-success': transaction.status == transactionStatusType.Approved, 
                        'text-danger': transaction.status == transactionStatusType.Rejected}">
        {{transactionStatusType[transaction.status]}}
      </span>
      <div *ngIf="canUserPost() && transaction.status == transactionStatusType.Pending">
        <button class="btn btn-dark w-100 mb-3" data-toggle="modal" data-target="#modal-resolve-journal-entry" 
                [attr.data-approve]="true" [attr.data-transaction]="transaction.id">Approve</button>
        <button class="btn btn-dark w-100" data-toggle="modal" data-target="#modal-resolve-journal-entry" 
                [attr.data-approve]="false" [attr.data-transaction]="transaction.id">Reject</button>
      </div>
    </td>
  </tr>
  <!-- 嵌入子组件生成条目行 -->
  <app-journal-entries-list [entries]="transaction.entries"></app-journal-entries-list>
 </ng-container>
 </tbody>
</table>

额外优化：固定表格布局避免列宽波动 #

可以给父表格加个CSS样式，强制固定列宽，让表头更稳定：

.e-table {
  table-layout: fixed;
  width: 100%;
}

这样修改后，父表格的列结构完全统一，Debit和Credit表头就不会再被挤偏了，格式会和你期望的目标样式一致。

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