C# 在Angular 6项目中固定显示表

我正在使用Angular 6、c#和MySQL的组合做一个小项目。我正试图将来自两个不同MySQL表的数据显示在一起，但我的格式设置一直被抛出。每当我包含来自另一个表的调用时，它就会将借方和贷方标题推到一边。我正试图解决这个问题，但不知道如何解决

这是当我把这些表混合在一起时，我一直得到的输出

尝试获取与此类似的表标题

下面是我目前在代码中所做的。我有一个日志组件，其中整个表都显示在css上，没有任何样式

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>{{transaction.createDate | date: 'M/d/yyyy'}}</td>
      <td>{{transactionType[transaction.type]}}</td>
      <td>{{transaction.createdBy.fullName}}</td>
      <!-- This is where other component is being pulled in -->
      <td><app-journal-entries-list [entries]="transaction.entries"></app-journal-entries-list></td>
      <td>{{transaction.description}}</td>
      <td 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>
  </ng-container>
  </tbody>
</table>

<table class="table entries-table">
  <tr *ngFor="let entry of getDebits()">
    <td>{{entry.account.name}}</td>
    <td>{{entry.amount | currency}}</td>
    <td></td>
  </tr>
  <tr *ngFor="let entry of getCredits()">
    <td> {{entry.account.name}}</td>
    <td></td>
    <td>{{entry.amount | currency}}</td>
 </tr>
</table>

日期
类型
创建人
账户
借记
信用
描述
地位
{{transaction.createDate}日期：'M/d/yyyy'}
{{transactionType[transaction.type]}
{{transaction.createdBy.fullName}
{{transaction.description}}
{{transactionStatusType[transaction.status]}
批准
拒绝

这里是另一个组件，从第二个MySQL表中提取信息。css在这里也没有样式

jre.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>{{transaction.createDate | date: 'M/d/yyyy'}}</td>
      <td>{{transactionType[transaction.type]}}</td>
      <td>{{transaction.createdBy.fullName}}</td>
      <!-- This is where other component is being pulled in -->
      <td><app-journal-entries-list [entries]="transaction.entries"></app-journal-entries-list></td>
      <td>{{transaction.description}}</td>
      <td 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>
  </ng-container>
  </tbody>
</table>

<table class="table entries-table">
  <tr *ngFor="let entry of getDebits()">
    <td>{{entry.account.name}}</td>
    <td>{{entry.amount | currency}}</td>
    <td></td>
  </tr>
  <tr *ngFor="let entry of getCredits()">
    <td> {{entry.account.name}}</td>
    <td></td>
    <td>{{entry.amount | currency}}</td>
 </tr>
</table>

{{entry.account.name}
{{entry.amount | currency}}
{{entry.account.name}
{{entry.amount | currency}}

这是有道理的。您正在创建一个新的td，其内容由一个新表填充，并根据需要占用尽可能多的空间

您真正需要做的是合并初始数据源中的信息

---

您可以传递

条目

而不是组件中的条目，也可以不创建新表，而是用新值更新条目的值，并像处理已生成的值一样显示它们。

这很有意义。您正在创建一个新的td，其内容由一个新表填充，并根据需要占用尽可能多的空间

您真正需要做的是合并初始数据源中的信息

您可以传递

条目

，而不是组件中的条目，也可以不创建新表，而是使用新值更新条目的值，并像使用已生成的值一样显示它们